CSS-Schaltflächen - Verwendung von btns.css
Die Bibliothek der Schaltflächen btns.css besteht aus einer Reihe von CSS-Schaltflächen, die glatte Übergänge verwenden.
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 = "btns.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/btns.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/btns.css">
</head>
<body>
<button class = "btn btn-lg btn-blue">Large</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/btns.css">
</head>
<body>
<button class = "btn btn-lg btn-red">Red</button>
<button class = "btn btn-lg btn-blue">Blue</button>
<button class = "btn btn-lg btn-green">Green</button>
<button class = "btn btn-lg btn-sea">Sea</button>
<button class = "btn btn-lg btn-yellow">Yellow</button>
<button class = "btn btn-lg btn-orange">Orange</button>
<button class = "btn btn-lg btn-purple">Purple</button>
<button class = "btn btn-lg btn-black">Black</button>
<button class = "btn btn-lg btn-cloud">Cloud</button>
<button class = "btn btn-lg btn-grey">Grey</button>
</body>
</html>Es wird die folgende Ausgabe erzeugt -
Stil definieren
Genau wie Größe, Farbe können Sie den Stil der Schaltfläche mithilfe von CSS definieren. Das folgende Beispiel zeigt, wie Sie den Stil der Schaltfläche ändern.
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/btns.css">
</head>
<body>
<button class = "btn btn-lg btn-blue">Regular</button>
<button class = "btn btn-lg btn-blue btn-round">Round</button>
<button class = "btn btn-lg btn-blue btn-raised">Raised</button>
<button class = "btn btn-blue btn-sm">Small</button>
<button class = "btn btn-lg btn-outline-blue ">Outlined</button>
</body>
</html>Es wird die folgende Ausgabe erzeugt -