So erstellen Sie Schaltflächen mit unterschiedlichen Effekten über CSS

Eine Vielzahl von Schaltflächeneffekten können über CSS erzielt werden. Beispielsweise kann die Farbverlaufseffektschaltfläche über das CSS-Verlaufsattribut und der Druckeffekt festgelegt werden Schaltfläche kann durch Box-Shadow realisiert werden. Heute werde ich in diesem Artikel zeigen, wie man verschiedene Arten von Schaltflächeneffekten erstellt, nämlich Flach-, Rahmen-, Verlaufs- und Schatten- und Druckschaltflächen. Als nächstes werden wir im Artikel detailliert vorstellen, wie man den Effekt durch CSS-Code erzielt.

HTML-Code

<div class="pm">
	<button>平面按钮</button>
</div>

Grundlegender CSS-Stilcode

button{
display: inline-block;
margin: 0 10px 0 0;
padding: 15px 45px;
font-size:20px;
font-family:"Bitter",serif;
line-height: 20px;
appearance: none;
 box-shadow:none;
 border-radius: 0;
}

(1) CSS-Schaltflächen im flachen Stil

Die Verwendung von Schaltflächen im flachen Stil ist mittlerweile sehr beliebt und entspricht dem allgegenwärtigen Trend zum flachen Design. , diese flachen Knöpfe sehen großartig aus. Der folgende Code ist der Normalzustand der Schaltfläche

.pm button {
  color:#fff;
  background-color:#6496c8;
  border:none;
}

Rendering:

(2 ) Border Style CSS Schaltflächen

Schaltflächen im Rahmenstil gehören zur gleichen Kategorie wie flache Schaltflächen. Der einzige Unterschied besteht darin, dass wir einen Rahmen anstelle der Hintergrundfarbe verwenden, die für die flache Schaltfläche verwendet wird. Der folgende Code ist der normale Zustand der Schaltfläche

.pm button {
  color:#444;
 border:5px solid #6496c8;
  background-color: #fff;
}

Rendering:

(3) Verlaufs- und Schattenstil CSS-Schaltflächen

Diese Schaltfläche im Verlaufs- und Schattenstil entspricht eher den Schaltflächeneffekten, die wir früher gesehen haben. Wenn Sie farbenfrohe Farben mögen, sind Schaltflächen im Verlaufs-/Schattenstil genau das Richtige für Sie. Das Schöne an der Erstellung dieser Schaltfläche ist, dass ihre Effekte alle in CSS erfolgen, sodass sie problemlos vergrößert oder verkleinert werden kann, ohne dass Sie sich Sorgen machen müssen, dass die Auflösung verloren geht oder ein neues Bild erstellt werden muss. Der folgende Code ist der Normalzustand der Schaltfläche

.pm button {
  color:#fff;
  text-align: center;
  box-shadow:inset 0 0 0 1px #e91e637d; 
  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, rgb(244,103,34), rgb(197,29,124));
  background: -moz-linear-gradient(right, rgb(244,103,34), rgb(197,29,124)); 
  background: linear-gradient(to right, rgb(244,103,34) , rgb(197,29,124));}
}

Rendering:

(4 ) Drücken Sie Style CSS Tasten

Diese Tasten im „Drück“-Stil vereinen ein flaches Design und eine Illusion, um dem Benutzer das Gefühl zu geben, als hätte er tatsächlich die Taste gedrückt. Wenn der Benutzer darauf drückt, scheint es auf der Seite hängenzubleiben. Seine Implementierung erfordert die Verwendung von Schatten, um ihm ein 3D-Popup-Erscheinungsbild zu verleihen. Der folgende Code ist der normale Zustand der Schaltfläche

.pm button {
  color: #fff;
  background-color: #6496c8;
  border: none;
  border-radius: 15px;
  box-shadow: 0 10px #27496d;
}

Rendering:

Zusammenfassung: Das Obige ist die Zusammenfassung dieses Artikels Das ist alles. Ich hoffe, dieser Artikel kann jedem helfen, den Umgang mit CSS zum Erstellen von Schaltflächeneffekten zu erlernen.

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