CSS-Schaltflächen - Beautons-Verwendung
Die Beautons-Schaltflächenbibliothek ist ein einfaches CSS-Toolkit zum Erstellen von Schaltflächen. Es ermöglicht die Anwendung einer Kombination von Stilen und Größen, um eine große Anzahl konsistenter, robuster und solider Schaltflächen zu erstellen.
Laden der Beautons
Laden Sie zum Laden der Beautons-Bibliothek das CSS von Github herunter und fügen Sie die folgende Zeile in den Abschnitt <head> der Webseite ein.
<head>
<link rel = "stylesheet" href = "beauton.min.css">
</head>Verwenden der Taste
Erstellen Sie eine Schaltfläche mit dem HTML-Schaltflächen-Tag und fügen Sie Stile btn hinzu.
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
</head>
<body>
<button class = "btn"<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/beauton.min.css">
</head>
<body>
<button class = "btn btn--small">Small</button> <br/> <br/>
<button class = "btn btn--large btn-blue">Large</button><br/><br/>
<button class = "btn btn--huge">Huge</button><br/><br/>
<button class = "btn btn--full">Full</button><br/><br/>
</body>
</html>Es wird die folgende Ausgabe erzeugt -
Definieren der Schriftgröße
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/beauton.min.css">
</head>
<body>
<button class = "btn btn--alpha">Huge</button><br/><br/>
<button class = "btn btn--beta">Large</button><br/><br/>
<button class = "btn btn--gamma">Regular</button><br/><br/>
</body>
</html>Es wird die folgende Ausgabe erzeugt -
Funktionstasten definieren
Das folgende Beispiel zeigt verschiedene Funktionstasten.
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
</head>
<body>
<button class = "btn btn--positive">Positive</button> <br/> <br/>
<button class = "btn btn--negative">Negative</button><br/><br/>
<button class = "btn btn--inactive">Disabled</button><br/><br/>
<button class = "btn btn--soft">Rounded</button><br/><br/>
<button class = "btn btn--hard">Hard</button><br/><br/>
</body>
</html>Es wird die folgende Ausgabe erzeugt -
Stile kombinieren
Das folgende Beispiel zeigt, wie die Stile der Schaltflächen kombiniert werden.
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
</head>
<body>
<button class = "btn btn--large btn--positive">Button</button> <br/><br/>
<button class = "btn btn--positive btn--alpha btn--small">Button</button><br/><br/>
<button class = "btn btn--negative btn--full btn--soft">Button</button><br/><br/>
<p>A <button class = "btn btn--natural">button</button> in a paragraph.</p><br/><br/>
</body>
</html>Es wird die folgende Ausgabe erzeugt -
EIN in einem Absatz.