So gestalten Sie eine Schaltfläche mit CSS

CSS ist eine Sprache, die für die Gestaltung von Webseiten verwendet wird. Sie kann viele interessante Effekte erzielen, einschließlich Gestaltungsschaltflächen. In diesem Artikel erfahren Sie, wie Sie Schaltflächen mithilfe von CSS gestalten.

Erstellen einer Schaltfläche in HTML

Erstellen Sie zunächst eine Schaltfläche auf der HTML-Seite, wie unten gezeigt:

<button>我是一个按钮</button>

Hier wird das <button>-Tag von HTML verwendet, um eine Schaltfläche zu erstellen.

Legen Sie den Grundstil der Schaltfläche fest.

Als nächstes können wir CSS verwenden, um den Grundstil für die Schaltfläche festzulegen, einschließlich Größe, Farbe, Schriftart, Rahmen usw.

button {
  font-size: 16px;
  padding: 10px 20px;
  background-color: #3f51b5;
  color: #fff;
  border: none;
  border-radius: 5px;
}

Dieser Code setzt die Schriftgröße aller Schaltflächen auf 16 Pixel und den Abstand oben und unten auf 10 Pixel und links und rechts auf 20 Pixel. Die Hintergrundfarbe der Schaltfläche ist #3f51b5 (dunkelblau) und die Vordergrundfarbe ist Weiß. Der Button hat keinen Rand und einen Eckenradius von 5 Pixeln.

Hover-Effekt

Wir können der Schaltfläche auch Hover-Effekte hinzufügen. Wenn der Benutzer beispielsweise den Mauszeiger über eine Schaltfläche bewegt, ändert sich die Hintergrundfarbe der Schaltfläche in Hellblau.

button:hover {
  background-color: #2196f3;
}

Aktivierungseffekt

Wenn auf die Schaltfläche geklickt wird, können wir einen Aktivierungseffekt hinzufügen, z. B. das Ändern der Hintergrundfarbe der Schaltfläche:

button:active {
  background-color: #1e88e5;
}

Deaktivierungseffekt

Wenn die Schaltfläche deaktiviert ist, können wir das Erscheinungsbild der Schaltfläche ändern B. das Ändern der Text- und Hintergrundfarbe, damit die Schaltfläche ungültig aussieht.

button:disabled {
  background-color: #ccc;
  color: #999;
  cursor: not-allowed;
}

Dieser Code setzt die Hintergrundfarbe der Schaltfläche auf Grau, die Textfarbe auf Dunkelgrau und den Zeigerstil auf ein verbotenes Symbol.

Fazit

Auf Webseiten sind Schaltflächen ein sehr häufiges Element und durch CSS können viele interessante Effekte erzielt werden. In diesem Artikel wird erläutert, wie Sie mit CSS den Grundstil, den Hover-Effekt, den Aktivierungseffekt und den Deaktivierungseffekt der Schaltfläche festlegen. Mit diesen Tipps können Sie Ihrer Website viele interessante dynamische Elemente hinzufügen und das Benutzererlebnis verbessern.

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