CSS3-Tutorial Erstellen Sie einen schlanken Ein / Aus-Button
Die Verwendung einer Taste ist bisher die bevorzugte Möglichkeit, mit elektronischen Geräten zu interagieren. wie Radio, Fernseher, Musikplayer und sogar ein Smartphone mit Sprachbefehlsfunktion benötigen noch mindestens eine oder zwei physische Tasten.
Darüber hinaus ist in diesem digitalen Zeitalter die Taste hat sich auch in seiner digitalen Form weiterentwickelt, was es interaktiver, dynamischer und einfacher macht, verglichen mit der physischen Taste.
Dieses Mal werden wir also einen glatten und interaktiven Button erstellen, der auf diesem hervorragenden Design von Dribbble basiert und nur CSS verwendet.
Nun, lass uns einfach anfangen.
HTML
Wir beginnen mit der Schaltfläche, indem Sie die folgende Markierung in unser HTML-Dokument einfügen. Es ist wirklich einfach, der Button würde auf einem Ankertag basieren, wir haben auch einen Spanne daneben, um das Indikatorlicht zu erstellen, und dann werden sie in einem HTML5 zusammengefügt Sektion Etikett.
& # xF011;
So sieht unser Button zunächst aus.
Grundlegendes Styling
In diesem Abschnitt beginnen wir mit der Arbeit an der Styles.
Wir wenden zuerst diesen dunklen Hintergrund aus dem subtilen Muster auf das Körperdokument an und zentrieren den Sektion. Dann entfernen wir auch das gepunktete Gliederung auf dem :Fokus und :aktiv Verknüpfung.
body Hintergrund: URL ('images / micro_carbon.png'); Abschnitt Marge: 150px Auto 0; Breite: 75px; Höhe: 95px; Position: relativ; Text ausrichten: Mitte; : aktiv,: Fokus Gliederung: 0; Benutzerdefinierte Schriftart verwenden
Für das Symbol der Schaltfläche verwenden wir eine benutzerdefinierte Schriftart aus Font Awesome anstelle eines Bildes. Auf diese Weise kann das Symbol im Stylesheet problemlos formatiert und skaliert werden.
Laden Sie die Schrift herunter und speichern Sie die Schriftdateien (eot, woff, ttf und svg) im Schriftarten und fügen Sie den folgenden Code in Ihr Stylesheet ein, um eine neue Schriftfamilie zu definieren.
@ font-face font-family: "FontAwesome"; src: url ("fonts / fontawesome-webfont.eot"); src: url ("fonts / fontawesome-webfont.eot? #iefix") format ('eot'), url ("fonts / fontawesome-webfont.woff") format ('woff'), url ("fonts / fontawesome- webfont.ttf ") format ('truetype'), url (" fonts / fontawesome-webfont.svg # FontAwesome ") format ('svg'); Schriftgewicht: normal; font-style: normal; 
Das Power-Symbol die wir für diese Schaltfläche benötigen, wird in Unicode-Nummer dargestellt F011; Wenn Sie sich das HTML-Markup genau ansehen, haben wir dieses numerische Zeichen eingefügt & # xF011; innerhalb des Anchor-Tags, aber da wir den Benutzer nicht definiert haben Schriftfamilie Im Schaltflächenstil muss das Symbol noch korrekt dargestellt werden.
Lesen Sie weiter: Unicode und HTML: Dokumentzeichen
Den Button gestalten
Zunächst müssen wir den Brauch definieren Schriftfamilie für den Button.
Unser Button wird ein Kreis sein, mit dem können Sie den Kreiseffekt erzielen Grenzradius Eigenschaft und setzen Sie den Wert auf mindestens die Hälfte der Schaltfläche Breite.
Da wir für das Symbol eine Schriftart verwenden, können Sie das einfach einstellen Farbe und hinzufügen Text-Schatten auch für das Symbol im Stylesheet.
Als Nächstes erstellen wir auch einen abgeschrägten Effekt für die Schaltfläche. Dieser Effekt ist ziemlich schwierig. Zuerst müssen wir uns bewerben Hintergrundfarbe: rgb (83,87,93); Für die Farbbasis der Schaltfläche addieren wir dann bis zu vier Ebenen Box-Schatten.
eine font-family: "FontAwesome"; Farbe: rgb (37,37,37); Textschatten: 0px 1px 1px rgba (250,250,250,0,1); Schriftgröße: 32pt; Bildschirmsperre; Position: relativ; Textdekoration: keine; Hintergrundfarbe: rgb (83,87,93); Box-Schatten: 0px 3px 0px 0px rgb (34,34,34), / * 1. Schatten * / 0px 7px 10px 0px rgb (17,17,17), / * 1nd Shadow * / Einfügung 0px 1px 1px 0px rgba (250) , 250, 250, .2), / * 3. Schatten * / Einfügung 0px -12px35px 0px rgba (0, 0, 0, .5); / * 4. Schatten * / Breite: 70px; Höhe: 70px; Grenze: 0; Grenzradius: 35px; Text ausrichten: Mitte; Zeilenhöhe: 79px;
Es gibt auch einen größeren Kreis außerhalb des Buttons und wir werden den verwenden :Vor Pseudoelement dafür, anstatt extra Markup hinzuzufügen.
a: before content: ""; Breite: 80px; Höhe: 80px; Bildschirmsperre; z-Index: -2; Position: absolut; Hintergrundfarbe: rgb (26,27,29); links: -5px; oben: -2px; Grenzradius: 40px; Box-Schatten: 0px 1px 0px 0px rgba (250,250,250,0,1), eingesetzter 0px 1px 2px rgba (0, 0, 0, 0,5);
Lesen Sie weiter: CSS: vorher und nachher Pseudoelemente (Hongkiat.com)
Kontrollleuchte
Unter der Taste befindet sich ein kleines Licht, das den Status des Ein- und Ausschaltzustands angibt. Im Folgenden wenden wir Rot für die Lichtfarbe an, da der Strom zunächst ausgeschaltet ist Box Schatten um den Glanzeffekt des Lichts nachzuahmen.
a + span display: block; Breite: 8px; Höhe: 8px; Hintergrundfarbe: rgb (226,0,0); Box-Schatten: Einfügung 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (226,0,0,0,5); Grenzradius: 4px; Lösche beide; Position: absolut; unten: 0; links: 42%;
Der Effekt
An diesem Punkt sieht unser Button gut aus und wir müssen nur einige Effekte hinzufügen. Wenn zum Beispiel der Button angeklickt wird, möchten wir, dass der Button so aussieht, als würde er gedrückt gehalten.
Um die Wirkung zu erzielen, die erste Box Schatten in der Taste wird auf Null gesetzt und die Position wird etwas abgesenkt. Wir müssen auch die Intensität der anderen drei Schatten ein wenig anpassen, um sie an die Tastenposition anzupassen.
a: aktiv box-shadow: 0px 0px 0px 0px rgb (34,34,34), / * 1. Schatten * / 0px 3px 7px 0px rgb (17,17,17), / * 2. Schatten * / Einschub 0px 1px 1px 0px rgba (250, 250, 250, .2), / * 3. Schatten * / Einfügung 0px -10px 35px 5px rgba (0, 0, 0, .5); / * 4th Shadow * / Hintergrundfarbe: rgb (83,87,93); oben: 3px;
Sobald die Schaltfläche angeklickt wurde, sollte sie gedrückt bleiben und das Symbol sollte leuchten, um anzuzeigen, dass die Stromversorgung eingeschaltet ist.
Um einen solchen Effekt zu erzielen, zielen wir den Button mit der Taste :Ziel Pseudoklasse, Ändern Sie dann die Farbe des Symbols in Weiß und fügen Sie ein Text-Schatten auch mit weißer Farbe.
a: target box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), eingesetzter 0px 1px 1px 0px rgba (250, 250, 250, .2) eingesetzter 0px -10px 35px 5px rgba (0, 0, 0, 0,5); Hintergrundfarbe: rgb (83,87,93); oben: 3px; Farbe: #fff; Textschatten: 0px 0px 3px rgb (250,250,250);
Lesen Sie weiter: Verwendung: Ziel Pseudoklasse
Wir müssen auch das anpassen Box Schatten im Kreis außerhalb der Schaltfläche wie folgt.
a: aktiv: vor, a: Ziel: vor oben: -5px; Hintergrundfarbe: rgb (26,27,29); Box-Schatten: 0px 1px 0px 0px rgba (250,250,250,0,1), eingesetzter 0px 1px 2px rgba (0, 0, 0, 0,5);
Die Leuchtanzeige wechselt von der Standardfarbe Rot zu Grün, um zu unterstreichen, dass die Stromversorgung bereits eingeschaltet ist.
a: target + span box-shadow: Einfügung 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (135,187,83,0,5); Hintergrundfarbe: rgb (135,187,83);
Übergangseffekt
Damit der Effekt der Schaltfläche reibungslos funktioniert, werden wir auch den folgenden Übergangseffekt anwenden.
Dieses Snippet unten fügt den Übergang speziell zum hinzu Farbe Eigentum und die Text-Schatten zum 350 ms im Ankerelement.
a Übergang: Farbe 350ms, Textschatten 350ms; -o-Übergang: Farbe 350 ms, Textschatten 350 ms; -Moz-Übergang: Farbe 350ms, Textschatten 350ms; -Webkit-Übergang: Farbe 350ms, Textschatten 350ms;
Dieser zweite Ausschnitt unten fügt den Übergang für das hinzu Hintergrundfarbe und Box Schatten Eigenschaft in der Leuchtanzeige.
a: target + span Übergang: Hintergrundfarbe 350 ms, Box-Schatten 700 ms; -o-Übergang: Hintergrundfarbe 350 ms, Box-Schatten 700 ms; -moz-Übergang: Hintergrundfarbe 350ms, Box-Schatten 700ms; -webkit-Übergang: Hintergrundfarbe 350ms, Box-Schatten 700ms;
Endergebnis
Wir haben alle benötigten Stile durchlaufen, jetzt können Sie das Endergebnis live sehen und die Quelldatei von den Links unten herunterladen.
- Demo
- Quelle herunterladen
Bonus: Wie kann ich es ausschalten?
Hier kommt der Bonus. Wenn Sie den Button aus der obigen Demo ausprobiert haben, ist Ihnen aufgefallen, dass der Button nur einmal angeklickt werden kann. Das heißt, um ihn zu aktivieren, also wie können wir ihn ausschalten?.
Leider müssen wir das mit der jQuery machen, aber es ist auch ganz einfach. Nachfolgend finden Sie den gesamten jQuery-Code, den wir benötigen.
$ (document) .ready (function () $ ('# button'). click (function () $ (this) .toggleClass ('on'););); Das obige Snippet fügt die Klasse ON in den Anker ein und wir haben die toggleClass Funktion von jQuery, um es hinzuzufügen. Also, wenn die #Taste Wenn Sie auf klicken, überprüft die jQuery, ob die Klasse ON hinzugefügt wurde oder nicht: Wenn dies nicht der Fall ist, fügt die jQuery die Klasse hinzu, und wenn sie hinzugefügt wurde, entfernt die jQuery die Klasse.
Hinweis: Vergessen Sie nicht, die jQuery-Bibliothek einzuschließen.
Jetzt müssen wir den Style ein wenig ändern. Ersetzen Sie einfach alle :Ziel Pseudoelement mit dem .auf Klassenauswahl wie folgt:
a.on box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), eingesetzter 0px 1px 1px 0px rgba (250, 250, 250, .2) eingesetzter 0px -10px 35px 5px rgba (0, 0, 0, 0,5); Hintergrundfarbe: rgb (83,87,93); oben: 3px; Farbe: #fff; Textschatten: 0px 0px 3px rgb (250,250,250); a: aktiv: vor, a.on: vor top: -5px; Hintergrundfarbe: rgb (26,27,29); Box-Schatten: 0px 1px 0px 0px rgba (250,250,250,0,1), eingesetzter 0px 1px 2px rgba (0, 0, 0, 0,5); a.on + span box-shadow: Einfügung 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (135,187,83,0,5); Hintergrundfarbe: rgb (135,187,83);
Versuchen wir es schließlich im Browser.
- Demo
- Quelle herunterladen
