CSS-Schaltflächen

In diesem Kapitel stellen wir vor, wie man CSS verwendet, um Schaltflächen zu erstellen.

Grundlegender Button-Stil

Beispiel

.button {
    background-color: #4C7EAF; /* Grün */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

Selbst ausprobieren »

Button-Farbe

Wir können verwendenbackground-colorAttribut zum Festlegen der Buttonfarbe:

Beispiel

.button1 {background-color: #4C7EAF;} /*green*/ .button2 {background-color: #008CBA;} /*blue*/ .button3 {background-color: #f44336;} /*Red*/ .button4 {background-color: #e7e7e7; color: black;} /*gray*/ .button5 {background-color: #555555;} /*black*/

Selbst ausprobieren »

Button-Größe

Wir können verwendenfont-sizeAttribut zum Festlegen der Schaltflächengröße:

Beispiel

.button1 {font-size: 10px;} .button2 {font-size: 12px;} .button3 {font-size: 16px;} .button4 {font-size: 20px;} .button5 {font-size: 24px;}

Selbst ausprobieren »

Abgerundeter Button

Wir können verwendenborder-radiusAttribut zum Festlegen eines abgerundeten Buttons:

Beispiel

.button1 {border-radius: 2px;} .button2 {border-radius: 4px;} .button3 {border-radius: 8px;} .button4 {border-radius: 12px;} .button5 {border-radius: 50%;}

Selbst ausprobieren »

Button-Rahmenfarbe

Wir können verwendenborderAttribut zum Festlegen der Button-Rahmenfarbe:

Beispiel

.button1 { background-color: white; color: black; border: 2px solid #4C7EAF; /* Grün */ } ...

Selbst ausprobieren »

Button beim Mausüberfahren


Wir können verwenden:hoverDer Selektor wird verwendet, um den Stil zu ändern, wenn die Maus über den Button fährt.

Tipp:Wir können verwendentransition-durationDie Eigenschaft legt die Geschwindigkeit des "hover"-Effekts fest:

Beispiel

.button { -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; } .button:hover { background-color: #4C7EAF; /* Grün */ color: white; } ...

Selbst ausprobieren »

Button-Schatten

Wir können verwendenbox-shadowAttribut, um dem Button einen Schatten hinzuzufügen:

Beispiel

.button1 { box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); } .button2:hover { box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); }

Selbst ausprobieren »

Deaktivierter Button

Wir können verwendenopacityDie Eigenschaft fügt dem Button Transparenz hinzu (ähnelt dem Effekt des "disabled"-Attributs).

Tipp:Wir können hinzufügencursorDie Eigenschaft, auf "not-allowed" gesetzt, wird verwendet, um ein deaktiviertes Bild festzulegen:

Beispiel

.disabled { opacity: 0.6; cursor: not-allowed; }

Selbst ausprobieren »

Button-Breite


Standardmäßig wird die Größe des Buttons durch den Textinhalt auf dem Button bestimmt (die Länge richtet sich nach dem Textinhalt). Wir könnenwidthdas Attribut zum Festlegen der Button-Breite:

Tipp:Wenn Sie eine feste Breite festlegen möchten, können Sie Pixel (px) als Einheit verwenden; wenn Sie einen responsiven Button festlegen möchten, können Sie ihn als Prozentwert angeben.

Beispiel

.button1 {width: 250px;} .button2 {width: 50%;} .button3 {width: 100%;}

Selbst ausprobieren »

Button-Gruppe


Außenabstand entfernen und hinzufügen,float:leftum eine Button-Gruppe zu erstellen:

Beispiel

.button { float: left; }

Selbst ausprobieren »

Button-Gruppe mit Rahmen


Wir können verwendenborderAttribut zum Festlegen einer Button-Gruppe mit Rahmen:

Beispiel

.button { float: left; border: 1px solid green }

Selbst ausprobieren »

Beispiel

.btn-group button { background-color: #0457AA; /*Grüner Hintergrund*/ border: 1px solid green; /*Grüner Rahmen*/ color: white; /*Weißer Text*/ padding: 10px 24px; /*Padding-Abstand,*/ cursor: pointer; /*Zeiger-/Handsymbol*/ float: left; /*Nebeneinander schwebende Buttons*/ }

Selbst ausprobieren »

Button-Animation

Beispiel

Fügen Sie eine Pfeilmarkierung hinzu, nachdem die Maus über den Button gefahren ist:


Selbst ausprobieren »

Beispiel

Fügen Sie beim Klick einen "Ripple"-Effekt hinzu:


Selbst ausprobieren »

Beispiel

Fügen Sie beim Klicken einen Effekt zum Herunterdrücken hinzu:


Selbst ausprobieren »

Für weitere Button-Stile können Sie den CSS-Button-Generator verwenden:https://c.example.com/front-end/6222/

Weitere Erweiterungen