So erstellen Sie CSS-Geisterschaltflächen mit Symbol auf Hover

Blog

So erstellen Sie CSS-Geisterschaltflächen mit Symbol auf Hover

So erstellen Sie CSS-Geisterschaltflächen mit Symbol auf Hover

Wie können wir mit HTML und CSS Geisterschaltflächen erstellen? Lösung: CSS Ghost Buttons mit Icon-Enthüllung beim Hover und auch mit Focus Effect.



Grundsätzlich, Geisterknopf ist ein einfaches Taste mit Rand und transparenter Hintergrundfarbe. Heutzutage verwenden wir dies an mehreren Stellen auf der Webseite, da es minimal und ziemlich gut aussieht. Dieser Beitrag ist für ein Beispiel für benutzerdefinierte Geistertasten .

Heute lernst du zu kreieren Tasten mit Hover- und Fokuseffekt . Auf einem Desktop können Sie mit der Maus über die Schaltfläche fahren, um zu sehen Schwebeeffekte , und Konzentriere dich auf die Tasten indem Sie die Tabulatortaste drücken, um auch den Fokuseffekt zu sehen. Ich bin mir auf dem Handy nicht sicher, aber ich denke, wenn du drückst und halte einen Knopf gedrückt Dann sieht man den Schwebeeffekt.



Also, heute teile ich CSS-Geisterschaltflächen mit Symbol . Grundsätzlich gibt es 4 einfache Tasten , aber wenn Sie mit der Maus darauf fahren, erscheinen ein Symbol und eine Farbe über den Schaltflächen. In diesem Design gibt es 4 verschiedene Arten von Tasten um verschiedene Logs anzuzeigen wie Warnung, Fehler, Erfolg usw. . Die verfügbaren Icons stimmen mit den Massagen überein, das macht es nützlich.

jquery erholsamer API-Aufruf

Wenn Sie jetzt denken, wie diese Schaltflächen mit Symbolen tatsächlich sind, dann sehen Sie die Vorschau unten angegeben.



Vorschau der Schaltflächen Hover- und Fokuseffekt

Sehen Sie sich diese Videovorschau an, um eine Vorstellung davon zu bekommen Tasten sind sieht aus wie .

Jetzt können Sie dies visuell sehen, auch sehen Sie live, indem Sie die oben angegebene Live-View-Taste drücken. Wenn dir das gefällt, dann hol dir das Quellcode von seiner.

CSS-Geisterschaltflächen mit Symbolquellcode

Vor Quellcode teilen , Lass uns darüber reden. Zuerst habe ich einfache Schaltflächen mit Tag erstellt, danach habe ich ein Symbol und eine Spanne für Text darin platziert. Der ganze Baum sieht jetzt so aus: Text.

fx-Netzwerke aktivieren Roku

Ich habe vier verschiedene Symbole in jeder Schaltfläche mit der Font-Awesome-Symbolbibliothek platziert. Wie Sie in der Vorschau sehen können, gibt es vier Schaltflächen mit verschiedenen Symbolen und Texten . Für das Aufdecken von Symbolen habe ich zunächst Symbole mit Rand links platziert: -100%; Wert und beim Hover wird sein Wert 0. Beim Hover mit der Maus machen wir zuerst zwei Arbeiten, entfernen Sie den Randwert des Symbols und füllen Sie Hintergrundfarbe .

Danach habe ich einen Übergang zum Erstellen des Animationseffekte , der Übergangswert ist Übergang: alle 300ms Ease-In-Out; Es gibt einen Fokuseffekt, den Sie in der Vorschau sehen können, den Sie durch Drücken der Tabulatortaste sehen können. Um das zu erstellen, habe ich einfach die Eigenschaft .btn:focus { value } verwendet.

Alle verbleibenden Dinge werden Sie nach Erhalt der Codes leicht verstehen, ich kann nicht alles schriftlich erklären. Um diese zu erstellen, müssen Sie nur 2 Dateien erstellen. Eins für HTML und einer für CSS . Befolgen Sie die Schritte, um dies ohne Fehler zu erstellen.

index.html

Erstellen Sie eine HTML-Datei mit dem Namen ‘ index.html ‘ und geben Sie diese hier unten angegebenen Codes ein.

 Ghost Button With Icon | Webdevtrick.com    info    success    warning    danger 

style.css

wie man HTML in Visual Studio verwendet

Erstellen Sie nun eine CSS-Datei namens ‘ style.css ‘ und geben Sie diese hier angegebenen Codes ein.

/** Code By Webdevtrick ( https://webdevtrick.com ) **/ body { padding-top: 15%; margin: 0 auto; text-align: center; background: #ececec; } .btn { font-weight: bold; font-size: 2rem; background-color: transparent; border: solid 3px; padding: 30px; margin: 10px 10px; display: inline-flex; overflow: hidden; cursor: pointer; transition: all 300ms ease-in-out; } .btn i, .btn span { width: 100%; display: block; padding: 0.7rem; margin: 0; box-sizing: border-box; flex-shrink: 0; text-transform: uppercase; } .btn i { margin-left: -100%; transition: margin-left 300ms ease-in-out; } .btn:hover i { margin-left: 0; } .btn.info { color: #1489ff; border-color: #1489ff; } .btn.info:hover { color: #ffffff; background-color: #1489ff; } .btn.info:focus { box-shadow: 0 0 0 0.3rem rgba(20, 137, 255, 0.7); } .btn.success { color: #00ce0d; border-color: #00ce0d; } .btn.success:hover { color: #ffffff; background-color: #00ce0d; } .btn.success:focus { box-shadow: 0 0 0 0.3rem rgba(0, 206, 13, 0.7); } .btn.warning { color: #fd9d08; border-color: #fd9d08; } .btn.warning:hover { color: #ffffff; background-color:#fd9d08; } .btn.warning:focus { box-shadow: 0 0 0 0.3rem rgba(241, 218, 25, 0.7); } .btn.danger { color: #ff2323; border-color: #ff2323; } .btn.danger:hover { color: #ffffff; background-color: #ff2323; } .btn.danger:focus { box-shadow: 0 0 0 0.3rem rgba(255, 35, 35, 0.7); } 

Das ist es. Jetzt haben Sie erfolgreich CSS Ghost Buttons mit Icon on Hover und auch mit Focus Effect erstellt.

Danke fürs Lesen. Wenn dir dieser Beitrag gefallen hat, teile ihn mit all deinen Programmierfreunden!

#css #html #javascript #web-entwicklung