Web-Frontend
CSS-Tutorial
Wie erstelle ich mit HTML und CSS einen Text-Reveal-Effekt für Schaltflächen?
Wie erstelle ich mit HTML und CSS einen Text-Reveal-Effekt für Schaltflächen?
In diesem Artikel besprechen wir Möglichkeiten zum Erstellen von Schaltflächen mit HTML und CSS, um den Anzeigeeffekt zu testen.
Schaltflächen sind die wichtigste Benutzeroberflächenkomponente für jede Website. Es ist sehr wichtig, die Schaltflächen kreativ und einzigartig zu gestalten. Der Text-Reveal-Effekt für eine Schaltfläche wird verwendet, um ein Angebot oder spannende Inhalte zur Verbesserung anzuzeigen die Benutzererfahrung.
Der Ansatz besteht darin, die Schaltfläche mit einem Streifen in der gleichen Größe wie die Schaltfläche zu bedecken und sie dann beim Bewegen der Maus in eine beliebige Richtung zu bewegen.
Um mit dem erwähnten Ansatz fortzufahren, müssen wir zwei Selektoren vor und beim Hover kennen, die für den Text-Offenbarungseffekt für den Button-Ansatz mit den CSS-Eigenschaften verwendet werden.
Der ::before-Selektor ist ein CSS-Pseudoelement, das verwendet wird, um denselben Inhalt mehrmals vor dem Inhalt anderer Elemente einzufügen. Dieser Selektor ist derselbe wie der ::after-Selektor. Es hilft beim Erstellen eines Pseudoelements, das das erste untergeordnete Element des ausgewählten Elements darstellt, und wird häufig verwendet, um mithilfe des Inhaltsattributs dekorativen Inhalt zu einem Element hinzuzufügen. Der Standardwert ist inline.
Grammatik
Das Folgende ist die Syntax des Vorher-Selektors -
element ::before{
content:
}
:hover selector ist eine CSS-Pseudoklasse, die zum Stylen von Elementen verwendet wird, wenn die Maus darüber fährt. Es kann auf jedes Element angewendet werden, indem man es auswählt, wenn man mit der Maus darüber fährt.
Grammatik
Das Folgende ist die Syntax des Vorher-Selektors -
element :hover{
// CSS declarations;
}Der folgende HTML-Codeausschnitt implementiert die Erstellung einer einfachen Schaltfläche mithilfe des Button-Tags.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>Create Text Reveal Effect for Buttons using HTML and CSS</title>
</head>
<body>
<button>Text Reveal</button>
</body>
</html>
CSS-Code −
Im Folgenden sind die Schritte zum Implementieren des CSS-Codes aufgeführt −
Schritt 1 − Wenden Sie einige grundlegende Stilrichtungen auf den Knopf an, z. B. das Hinzufügen von Polsterung und Randradius, um abgerundete Ecken zu erhalten.
Schritt 2 − Verwenden Sie nun die Vorher-Auswahl, um einen Streifen derselben Größe zu erstellen, der den gesamten Knopf abdeckt.
Schritt 3 − Verwenden Sie nun den Hover-Selektor, um den Streifen in eine beliebige Richtung zu verschieben, so wie er im Beispiel nach links verschoben wird.
Hinweis − Sie können den Streifen je nach Bedarf in jede Richtung verschieben. Außerdem können Sie einige andere Eigenschaften verwenden, um den Effekt entsprechend Ihren Wünschen anzupassen.
Index.css
<style>
button {
position: absolute;
top: 50%;
left: 50%;
font-size: 20px;
padding: 15px;
}
button::before {
content: "";
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background: blue;
transition: 0.5s ease-in-out;
}
button:hover::before {
left: -100%;
}
</style>
Beispiel
lautet:Beispiel
Vollständiger Code − Es handelt sich um eine Kombination der beiden oben genannten Codeteile.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Text Reveal Effect for Buttons</title>
<style>
button {
position: absolute;
top: 50%;
left: 50%;
font-size: 20px;
padding: 15px;
}
button::before {
content: "";
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background: blue;
transition: 0.5s ease-in-out;
}
button:hover::before {
left: -100%;
}
</style>
</head>
<body>
<button>Text Reveal</button>
</body>
</html>Unterstützte Browser − Die von der pointer-events-Eigenschaft unterstützten Browser sind unten aufgeführt −
- Google Chrome 1.0
- Edge 12.0
- Internet Explorer 11.0
- Firefox 1.5
- Opera 9.0
- Safari 4.0
Hinweis: Opera 4–6 unterstützt Einzeldoppelpunkte.(::before).
Dieser Artikel konzentriert sich auf die Verwendung von HTML und CSS zum Erstellen einer Schaltfläche mit einem Texteinblendungseffekt unter Verwendung von Before- und CSS-Selektoren.
Das obige ist der detaillierte Inhalt vonWie erstelle ich mit HTML und CSS einen Text-Reveal-Effekt für Schaltflächen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1378
52
Machen Sie Ihren ersten Seltsamen -Sufle -Übergang
Mar 15, 2025 am 11:08 AM
Die Sufelte Transition -API bietet eine Möglichkeit, Komponenten zu beleben, wenn sie das Dokument eingeben oder verlassen, einschließlich benutzerdefinierter Svelte -Übergänge.
Arbeiten mit GraphQL Caching
Mar 19, 2025 am 09:36 AM
Wenn Sie kürzlich mit GraphQL gearbeitet oder seine Vor- und Nachteile überprüft haben, haben Sie zweifellos Dinge wie "GraphQL nicht unterstützen Caching" oder gehört
Show, Don ' Tell
Mar 16, 2025 am 11:49 AM
Wie viel Zeit damit, die Inhaltspräsentation für Ihre Websites zu entwerfen? Wenn Sie einen neuen Blog -Beitrag schreiben oder eine neue Seite erstellen, denken Sie darüber nach
Aufbau einer Ethereum -App mit Redwood.js und Fauna
Mar 28, 2025 am 09:18 AM
Mit dem jüngsten Aufstieg von Bitcoins Preis über 20.000 USD und kürzlich von 30.000, dachte ich, es lohnt
Erstellen Sie Ihr eigenes Bragdoc mit ELEITY
Mar 18, 2025 am 11:23 AM
Unabhängig davon, in welcher Phase Sie als Entwickler Sie befinden, haben die Aufgaben, die wir erledigen - ob groß oder klein - einen enormen Einfluss auf unser persönliches und berufliches Wachstum.
Vue 3
Apr 02, 2025 pm 06:32 PM
Es ist aus! Herzlichen Glückwunsch an das Vue -Team, dass es eine massive Anstrengung war und lange kommt. Alle neuen Dokumente auch.
Ein bisschen auf CI/CD
Apr 02, 2025 pm 06:21 PM
Ich sage "Website" passt besser als "Mobile App", aber ich mag dieses Rahmen von Max Lynch:
Verwenden wir (x, x, x, x), um über Spezifität zu sprechen
Mar 24, 2025 am 10:37 AM
Ich habe mich neulich mit Eric Meyer unterhalten und erinnerte mich an eine Eric Meyer -Geschichte aus meinen prägenden Jahren. Ich habe einen Blog -Beitrag über CSS -Spezifität geschrieben, und
