Heim > Artikel > Web-Frontend > So erstellen Sie eine Schaltfläche mit CSS

So erstellen Sie eine Schaltfläche mit CSS

不言Original: 2018-12-06 14:12:104788Durchsuche

Der heutige Artikel stellt Ihnen vier Methoden zur Schaltflächenimplementierung vor, darunter gewöhnliche quadratische Schaltflächen, abgerundete Schaltflächen, dreidimensionale Schaltflächen und Schaltflächen mit einfachen Animationen. Werfen wir einen Blick auf den spezifischen Inhalt.

Werfen wir zunächst einen Blick auf die Implementierung der normalen quadratischen Schaltfläche

Der Schaltflächencode lautet wie folgt

HTML-Code

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
<button>普通方形So erstellen Sie eine Schaltfläche mit CSS</button>
</body>
</html>

Die Implementierungsmethode der abgerundeten Schaltfläche

Der Code lautet wie folgt

HTML-Code

<button class="kadomaru">圆角So erstellen Sie eine Schaltfläche mit CSS</button>

CSS-Code

.kadomaru {
  width:100px;
  font-size:12px;
  color:#FFFFFF;
  text-align:center;
  display:block;
  padding:10px 0 10px;
  background:#6BCBF6;
  border-radius: 20px;
}

So implementieren Sie die dreidimensionale Schaltfläche

Der Code lautet wie folgt

HTML-Code

<button class="shadow">立体So erstellen Sie eine Schaltfläche mit CSS</button>

CSS-Code

.shadow {
  width:100px;
  font-size:12px;
  color:#FFFFFF;
  text-align:center;
  display:block;
  padding:10px 0 10px;
  background:#6BCBF6;
  border-radius:5px;
  box-shadow:1px 1px #1A6EA0;
}

Verwenden Sie box-shadow, um die Schattengröße und die Schattenfarbe anzugeben, um ein dreidimensionales Gefühl zu erzeugen.

Die durch die oben genannten drei Methoden erzielten Schaltflächeneffekte sind wie folgt:

So erstellen Sie eine Schaltfläche mit CSS

Die letzte ist eine Schaltflächenimplementierung mit einfacher Animation ein konkretes Beispiel.

Der Code lautet wie folgt

HTML-Code

<div class="animation">
  <div class="effect"></div>
  <a href="#"> Touch me </a>

CSS-Code

.animation {
  width:100px;
  height:50px;
  text-align:center;
  border:2px solid #BBBBBB;
  float:left;
  cursor:pointer;
  position:relative;
  box-sizing:border-box;
  overflow:hidden;
  margin:0 0 40px 0;
}
.animation a {
  font-family:arial;
  font-size:12px;
  color:#BBBBBB;
  text-decoration:none;
  line-height:50px;
  transition:all .10s ease;
  z-index:2;
  position:relative;
}
.effect {
  width:140px;
  height:50px;
  top:-2px;
  left:-140px;
  background:#BBBBBB;
  position:absolute;
  transition:all .5s ease;
  z-index:1;
}
.animation:hover .effect {
  left:0;
}
.animation:hover a {
  color:#FFFFFF;
}

Um ein Beispiel für die Anpassung vorzustellen, ändern Sie Ändern Sie das linke Attribut von .effect in das rechte Attribut und ändern Sie das linke Attribut von .animation:hover .effect in das rechte Attribut, um es in eine nach rechts gerichtete Animation umzuwandeln.

Wenn der obige Code ausgeführt wird, wird der folgende Effekt im Browser angezeigt:

So erstellen Sie eine Schaltfläche mit CSS

Setzen Sie die Maus auf die Schaltfläche und es wird eine rechte Animation angezeigt um den Effekt zu zeigen.

So erstellen Sie eine Schaltfläche mit CSS

Dieser Artikel ist hier zu Ende. Informationen zum Erstellen von Schaltflächen in CSS finden Sie im CSS-Video-Tutorial oder CSS3-Video-Tutorial Spalte zum weiteren Lernen! ! !

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Schaltfläche mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css css3 html animation

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie CSS-FlexboxNächster Artikel：So verwenden Sie CSS-Flexbox

In Verbindung stehende Artikel

Mehr sehen