Beispiele für CSS -Tastenstile

Der grundlegende Schaltflächenstil bietet eine einfache Standard -Taste mit einem blauen Hintergrund und einem Schwebeverdunking -Effekt. 2. Die Grenzknopf nimmt einen transparenten Hintergrund und einen blauen Rand an, und der Hintergrund wird beim Schwebewechsel gefüllt, was für sekundäre Operationen geeignet ist. 3. Die abgerundete Ecke fügt Schatten hinzu und klickt auf Bewegungsgemälde, um die Textur und das interaktive Feedback zu verbessern. 4. Die Gradient -Taste verwendet orangefarbene Pulver -Linear -Gradienten, die visuell prominent ist und für Aktionsanrufszenen geeignet ist. 5. Die Symboltaste kombiniert Text und Symbole, um durch Flex -Layout eine grafische Ausrichtung zu erzielen, um die Erkennung zu verbessern. 6. Der Deaktivierungsknopf zeigt ein graues Erscheinungsbild und deaktiviert den Cursor, um einen inoperablen Zustand anzuzeigen. 7. Die Taste der Impulsanimation vergrößert und verblasst die Animation durch Pseudo-Elemente, um Benutzer zum Klicken anzulocken. Es wird empfohlen, den Übergangseffekt und die CSS -Variablen zu koordinieren, um sie einheitlich zu verwalten, und zu beachten, dass die Größe der mobilen Taste mindestens 44px beträgt, um die Klickbarkeit sicherzustellen.

Natürlich finden Sie nachstehend einige gängige Beispiele für CSS -Taste, von grundlegend bis hin zu Erweitert und geeignet für die Verwendung in verschiedenen Szenarien. Diese Stile können direkt in Ihr Projekt kopiert und nach Bedarf angepasst werden.

1. Basic -Schaltflächenstil (Standard -Schaltfläche)

 .BTN {
  Polsterung: 10px 20px;
  Schriftgröße: 16px;
  Farbe: weiß;
  Hintergrundfarbe: #007BFF;
  Grenze: Keine;
  Border-Radius: 5px;
  Cursor: Zeiger;
  Übergang: Hintergrundfarbe 0,3s Leichtigkeit;
}

.BTN: Hover {
  Hintergrundfarbe: #0056B3;
}

Die Standardschaltfläche für die meisten Webseiten ist einfach und klar.

2. Randknopf (Umriss -Taste)

 .BTN-OUTLINE {
  Polsterung: 10px 20px;
  Schriftgröße: 16px;
  Farbe: #007BFF;
  Hintergrundfarbe: transparent;
  Grenze: 2PX Solid #007BFF;
  Border-Radius: 5px;
  Cursor: Zeiger;
  Übergang: Alle 0,3s leichten;
}

.BTN-OUTLINE: Hover {
  Hintergrundfarbe: #007BFF;
  Farbe: weiß;
}

Häufig für sekundäre Operationen wie "Abbrechen" oder "Rückgabe" verwendet.

3.. Abgerundeter Schaltfläche (mit Textur)

 .BTN-aufgewachsen {
  Polsterung: 12px 24px;
  Schriftgröße: 16px;
  Farbe: weiß;
  Hintergrundfarbe: #28a745;
  Grenze: Keine;
  Border-Radius: 8px;
  Box-Shadow: 0 4px 6px RGBA (0, 0, 0, 0,1);
  Cursor: Zeiger;
  Übergang: Alle 0,3s leichten;
}

.BTN-erhoben: Hover {
  Hintergrundfarbe: #218838;
  Transformation: Translatey (-2px);
  Box-Shadow: 0 6px 8px RGBA (0, 0, 0, 0,15);
}

.BTN-erhoben: aktiv {
  Transformation: Translatey (0);
  Box-Shadow: 0 2px 4px RGBA (0, 0, 0, 0,1);
}

Fügen Sie Schatten hinzu und klicken Sie auf Feedback, um die Interaktion zu verbessern.

4. Gradientenknopf

 .BTN-Gradient {
  Polsterung: 12px 24px;
  Schriftgröße: 16px;
  Farbe: weiß;
  Hintergrund: Linear-Gradient (90di, #ff7a00, #ff0080);
  Grenze: Keine;
  Border-Radius: 25px;
  Cursor: Zeiger;
  Übergang: Deckkraft von 0,3s Leichtigkeit;
}

.BTN-Gradient: Hover {
  Opazität: 0,9;
}

Es hat eine starke visuelle Wirkung und eignet sich für CTA -Tasten (Call to Action) wie "Now kaufen".

5. Symboltaste (mit Symbol)

 .BTN-ICON {
  Anzeige: Inline-Flex;
  Ausrichtung: Zentrum;
  Lücke: 8px;
  Polsterung: 10px 16px;
  Schriftgröße: 16px;
  Farbe: weiß;
  Hintergrundfarbe: #007BFF;
  Grenze: Keine;
  Border-Radius: 6PX;
  Cursor: Zeiger;
}

.BTN-ICON: Hover {
  Hintergrundfarbe: #0056B3;
}

 <button class = "btn-icon">
  <span>? </span>
  Wie </button>

Geeignet für Schaltflächen, die die Kombination von Bildern und Texten erfordern, wie z. B. Freigabe, Likes usw.

6. Deaktivieren Sie die Statusschaltfläche

 .BTN-Behindert {
  Polsterung: 10px 20px;
  Schriftgröße: 16px;
  Farbe: #6c757d;
  Hintergrundfarbe: #e9ecef;
  Grenze: Keine;
  Border-Radius: 5px;
  Cursor: nicht verurteilt;
  Deckkraft: 0,6;
}

Wird für den nicht klickbaren Status verwendet, z. B. wenn das Formular nicht ausgefüllt ist.

7. Schaltfläche Animation (Anziehen)

 .BTN-PULSE {
  Position: Relativ;
  Polsterung: 12px 24px;
  Schriftgröße: 16px;
  Farbe: weiß;
  Hintergrundfarbe: #DC3545;
  Grenze: Keine;
  Border-Radius: 5px;
  Cursor: Zeiger;
}

.BTN-Pulse :: After {
  Inhalt: '';
  Position: absolut;
  Top: 50%;
  Links: 50%;
  Breite: 30px;
  Höhe: 30px;
  Hintergrund: RGBA (220, 53, 69, 0,4);
  Grenzradius: 50%;
  Transformation: Translate (-50%, -50%);
  Animation: Puls 1.5s unendlich;
}

@keyframes pulse {
  0% {
    Transformation: Translate (-50%, -50%) Skala (0,8);
    Opazität: 0,7;
  }
  100% {
    Transformation: Translate (-50%, -50%) Skala (2,4);
    Deckkraft: 0;
  }
}

Wird für wichtige Schaltflächen wie "Jetzt registrieren" verwendet, um die Aufmerksamkeit der Benutzer auf sich zu ziehen.

Tipps

• Verwenden Sie transition , um die Knopfinteraktion natürlicher zu gestalten.
• Vermeiden Sie die Überbeanspruchung von Animationen, um zu vermeiden, dass die Benutzererfahrung stört.
• Achten Sie auf die Knopfgröße am mobilen Terminal (das mindestens 44px hoch wird empfohlen).
• Farbe und Größe können gleichmäßig mit CSS -Variablen verwaltet werden:

 :Wurzel {
  -BTN-Primary: #007BFF;
  -BTN-SUCCESS: #28A745;
  -BTN-Radius: 5px;
}

Grundsätzlich ist alles, nicht kompliziert, aber es ist leicht, Details zu ignorieren. Sie können diese Stile nach Ihrem Markenstil verwenden.

Das obige ist der detaillierte Inhalt vonBeispiele für CSS -Tastenstile. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!