CSS-Schaltflächen - Verwendung von Drucktasten
Die Pushy Buttons-Bibliothek ist eine kleine CSS Pressable Buttons-Bibliothek.
Laden der Datei bttn.css
Laden Sie zum Laden der Bibliothek pushy-button.min.css die CSS-Datei von github herunter und fügen Sie die folgende Zeile in den Abschnitt <head> der Webseite ein.
<head>
<link rel = "stylesheet" href = "pushy-buttons.min.css">
</head>Verwenden der Taste
Erstellen Sie eine Schaltfläche mit dem HTML-Schaltflächen-Tag und fügen Sie die Stile btn, btn-blue mit dem Größenbezeichner btn-lg hinzu.
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
</head>
<body>
<button class = "btn btn--blue">Submit</button>
</body>
</html>Es wird die folgende Ausgabe erzeugt -
Größe definieren
Sie können die Größe einer Schaltfläche erhöhen oder verringern, indem Sie ihre Größe mithilfe von CSS definieren und zusammen mit dem Klassennamen verwenden, wie unten gezeigt. Im angegebenen Beispiel haben wir vier Größen geändert.
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
</head>
<body>
<button class = "btn btn--lg btn--blue">Large</button>
<button class = "btn btn--df btn--blue">Normal</button>
<button class = "btn btn--md btn--blue">Medium</button>
<button class = "btn btn--sm btn--blue">Small</button>
</body>
</html>Es wird die folgende Ausgabe erzeugt -
Farbe definieren
Genau wie bei der Größe können Sie die Farbe der Schaltfläche mithilfe von CSS definieren. Das folgende Beispiel zeigt, wie Sie die Farbe der Schaltfläche ändern.
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
</head>
<body>
<button class = "btn btn--lg btn--red">Large</button>
<button class = "btn btn--df btn--green">Normal</button>
<button class = "btn btn--md btn--blue">Medium</button>
</body>
</html>Es wird die folgende Ausgabe erzeugt -