CSS-Schaltflächen - Verwendung von bttn.css
Die Bibliothek bttn.css bietet eine große Sammlung einfacher Stile für Schaltflächen. Diese Bibliothek ist sowohl für den persönlichen als auch für den kommerziellen Gebrauch völlig kostenlos. Diese Schaltflächen können einfach angepasst werden.
Laden der Datei bttn.css
Um die Bibliothek btns.css zu laden, gehen Sie zum Link btns.css und fügen Sie die folgende Zeile in den Abschnitt <head> der Webseite ein.
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
</head>Verwenden der Taste
Erstellen Sie eine Schaltfläche mit dem HTML-Schaltflächen-Tag und fügen Sie die Stile bttn-slant, bttn-royal mit dem Größenbezeichner bttn-lg hinzu.
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
</head>
<body>
<button class = "bttn-slant">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 = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
</head>
<body>
<button class = "bttn-pill bttn-lg">Large</button>
<button class = "bttn-pill bttn-md">Medium</button>
<button class = "bttn-pill bttn-sm">Small</button>
<button class = "bttn-pill bttn-xs">Extra 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 = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
</head>
<body>
<button class = "bttn-pill bttn-lg bttn-primary">Primary</button>
<button class = "bttn-pill bttn-md bttn-warning">Warning</button>
<button class = "bttn-pill bttn-sm bttn-danger">Danger</button>
<button class = "bttn-pill bttn-xs bttn-success">Success</button>
<button class = "bttn-pill bttn-xs bttn-royal">Royal</button>
</body>
</html>Es wird die folgende Ausgabe erzeugt -