Heim > Artikel > Web-Frontend > 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?

王林nach vorne: 2023-08-19 12:17:131404Durchsuche

How to Create Text Reveal Effect for Buttons using HTML and CSS?

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>

Die chinesische Übersetzung von

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!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Was ist Graceful Degradation in CSS?Nächster Artikel：Was ist Graceful Degradation in CSS?

In Verbindung stehende Artikel

Mehr sehen