Heute gehen wir einen Schritt zurück von den fortgeschrittenen Diskussionen über CSS-Präprozessoren und kehren zu einigen guten alten Grundlagen zurück. Wir werden vier sehr einfache CSS-Buttons erstellen, die jeweils einen einzigartigen animierten Hover-Effekt haben.
Folgen Sie mir und erstellen Sie Ihre eigenen Buttons. Fühlen Sie sich auch frei, meinen Code zu packen und für Ihre Projekte zu verwenden. Wenn Sie ein CSS-Neuling sind und nach einer guten Möglichkeit suchen, Ihre Schaltflächen interessanter zu gestalten, ist dieser Artikel für Sie!
Was wir bauen
Ich habe alle Knöpfe in eine Demo geworfen, so dass Sie einen kurzen Blick auf alles werfen können, was wir heute machen werden. Klicken Sie auf den Link unten, um sie zu überprüfen!
Demo: Klicken Sie hier, um zu starten.
Globale Einstellungen
Bevor wir mit den einzelnen Schaltflächen beginnen, sind hier einige globale Einstellungen aufgeführt, die ich in allen Beispielen angewendet habe.
HTML
Zum Experimentieren verwende ich nur einen einfachen Link und stelle ihn als Blockelement ein. Ich bekomme immer ein paar unangenehme Kommentare zu dieser Technik, wenn Sie einen Input verwenden möchten, seien Sie mein Gast!
CSS
Für das CSS habe ich einfach die Schriftart auf Helvetica gesetzt, sichergestellt, dass der Text weiß ist, und die Standardtextverzierung (Unterstriche) für die Links wurde deaktiviert.
Wachsende Taste
Unser erstes Button-Experiment ist einer meiner Favoriten. Obwohl wir fast immer einen Schwebeflugeffekt erwarten, wenn wir mit der Maus über einen Link oder eine Schaltfläche im Web fahren, erwarten wir normalerweise etwas ziemlich subtiles, so dass dieses eine schöne Überraschung bringt: Es ändert seine Form!
Die Grundidee ist, dass Sie einen einfachen Button mit einer Nachricht haben. In unserem Beispiel verwenden wir? Jetzt anmelden.? Wenn Sie den Mauszeiger über die Schaltfläche bewegen, wird sie horizontal vergrößert, um einen Teil der Nachricht anzuzeigen, der ursprünglich verborgen war. Mal sehen, wie das funktioniert.
Basic CSS
Um zu beginnen, müssen wir unserem Knopf nur eine grundlegende Form und Farbe geben. Hier habe ich die Höhe auf 28px und die Breite auf 115px eingestellt, einige Ränder und Polsterungen hinzugefügt und den Button mit einem leichten Rand versehen.
Lust auf CSS3
Manche Leute sind aufgeregt, wenn Sie zu viel CSS für eine einfache Schaltfläche verwenden. Aus diesem Grund trenne ich die langen CSS3-Stile, die ich verwenden werde. Die Styles in diesem Abschnitt sind vollständig optional und lassen den Button einfach moderner und cooler aussehen.
Ich habe mit einem einfachen 15px-Randradius begonnen, um einige schöne abgerundete Ecken zu erhalten, und dann eine leichte Verlaufsüberlagerung hinzugefügt. Der Farbverlauf beginnt bei transparent und wird schwarz. Dies ist ein kleiner Trick, den ich verwende, um einen schnellen dunkler werdenden Farbverlauf anzuwenden, der mit nahezu jeder Hintergrundfarbe funktioniert.
Animation CSS
Jetzt ist es an der Zeit, unsere CSS-Umstellung einzurichten. Das ist ziemlich einfach, das Ärgerlichste ist, dass wir es wie oben so oft wiederholen müssen! Hier habe ich die Animation so eingestellt, dass sie alle Änderungen beeinflusst, die Dauer auf eine halbe Sekunde und die Timing-Funktion erleichtert.
Hover-CSS
Zum Abschluss müssen Sie lediglich einen Hover-Stil hinzufügen, der die Breite erweitert. Ich habe 200px als ausreichende Breite gemessen, um den verborgenen Text anzuzeigen. Wenn Sie den Mauszeiger über die Schaltfläche bewegen, erhalten Sie eine schöne flüssige Animation, die eine versteckte Nachricht enthüllt.
Einfache Farbverschiebung
Dies ist die einfachste aller CSS-Button-Animationen. Es ist so einfach, dass ich gezögert habe, es einzubeziehen, aber weil es eine beliebte Option ist, dachte ich, ich würde es einwerfen. Was hier passiert, ist, dass Sie eine Hintergrundfarbe haben, die sich beim Schweben ändert, aber wir verwenden einen Übergang wie den obigen, um allmählich zu wechseln verschiebe die Farbe, anstatt die Änderung sofort vorzunehmen.
Basic CSS
Das CSS ist dem letzten Mal sehr ähnlich mit ein paar bemerkenswerten Änderungen. Ich habe eine andere Hintergrundfarbe hinzugefügt und die Form etwas geändert. Ich habe den Text auch zentriert und die Zeilenhöhe auf die vertikale Höhe der Schaltfläche eingestellt, um ihn zu zentrieren.
Lust auf CSS3
Wieder haben wir einige vollständig optionale visuelle Stile. Ich habe hier etwas weniger als einen Grenzradius festgelegt, einen ähnlichen Hintergrundverlauf angewendet und das zusätzliche Element eines Boxschattens hinzugefügt. Mit rgba mit dem Schatten habe ich ihn auf Schwarz gesetzt und dann die Transparenz reduziert.
Animation CSS
Wir können genau die gleiche Übergangseinstellung verwenden, die wir im vorherigen Beispiel verwendet haben:
Hover-CSS
Zum Schluss wenden Sie einfach eine andere Hintergrundfarbe an. Wählen Sie in Photoshop eine etwas hellere Variante der Farbe, damit der Übergang schön aussieht. Schauen Sie sich auch 0to255.com an, um ein großartiges Werkzeug zu finden, mit dem Sie Farbvariationen herausfinden können.
Hintergrundbildverschiebung
Dieser ist wirklich interessant und kann aufgrund der Auswahl des Hintergrundbildes erheblich andere Ergebnisse erzielen. Ich werde ein sehr subtiles Muster verwenden, so dass der Effekt ziemlich subtil ist. Verwenden Sie etwas mutigeres für ein verrückteres Endergebnis.
Hier ist der Kern: Sie wenden ein Hintergrundbild auf die Schaltfläche an und verschieben dann die Position des Hintergrunds im Schwebeflug. Werfen Sie einen Übergang und Sie erhalten einen schönen Scrolleffekt.
Basic CSS
In den meisten Fällen ist dies genauso wie im vorherigen Beispiel. Beachten Sie jedoch, dass jetzt ein Hintergrundbild angewendet wird (dies wird standardmäßig wiederholt). Ich habe die anfängliche Hintergrundposition auf "0 0" gesetzt. Nur so können Sie sich ein Bild davon machen, wie das funktioniert. Wenn wir die Hover-Stile später einstellen, verschieben wir diese Position einfach vertikal.
Lust auf CSS
Es gibt nichts Besonderes, das wir noch nicht besprochen haben, nur abgerundete Ecken und einen Schatten.
Animation CSS
Wieder verwenden wir das gleiche Snippet für unsere Animation. Dieses Mal habe ich die Dauer auf 0,8 Sekunden erhöht, sodass sie ein wenig länger hält.
Hover-CSS
Jetzt ist es Zeit, diese Hintergrundposition zu verschieben. Denken Sie daran, dass wir bei 0 0 begonnen haben. Jetzt verschieben wir das Bild vertikal, indem wir die zweite Zahl auf 150px setzen. Wenn wir die horizontale Position verschieben wollten, würden wir die erste Zahl ändern.
3D gedrückte Taste
Für unseren letzten Trick ahmen wir ein beliebtes 3D-Button-Design nach, das aussieht, als würde es gedrückt, wenn Sie den Mauszeiger darüber bewegen. Diese Animation ist so einfach, dass wir keine CSS-Übergänge benötigen, aber das Endprodukt ist immer noch eine ziemlich schöne, wenn auch sofortige Animation.
Basic CSS
Hier ist das grundlegende CSS für unseren letzten Button. Beachten Sie, dass sowohl dieses als auch das letzte Beispiel subtile Textschatten verwenden, um den Text etwas mehr hervorzuheben.
Lust auf CSS
Diesmal ist das ausgefallene CSS nicht optional. Wenn Sie diesen Effekt erzielen möchten, benötigen Sie mindestens den Schatten und den Verlauf. Der harte Schatten gibt dem Button den gefälschten 3D-Effekt. Es ist nicht die überzeugendste Illusion, die es je gegeben hat, aber es macht trotzdem einen gut aussehenden Knopf aus.
Hover-CSS
Dies ist unser bisher größtes Stück Hover-CSS. Grundsätzlich reduzieren wir die Länge des Schattens und versetzen diese Transformation mit einem Rand. Dies vermittelt die Illusion, dass die Taste gedrückt wird. Das Umdrehen des Farbverlaufs hilft auch der Illusion.
Fazit
Nachdem Sie dieses kurze Tutorial durchgelesen haben, sollten Sie sich mit der Implementierung grundlegender CSS3-Stile vertraut machen, damit ein Button schön und attraktiv aussieht. Sie sollten auch ein gutes Verständnis dafür haben, wie CSS-Übergänge funktionieren und was für eine Cross-Browser-Kompatibilität erforderlich ist. Schließlich sollten Sie einige fantastische Ideen haben, um coole Hover-Effekte zu erzeugen.
Hinterlasse einen Kommentar und lass mich wissen, was du denkst. Haben Sie in der Vergangenheit ähnliche Effekte verwendet? Wie würden Sie diese Beispiele modifizieren oder verbessern?