CSS-Schaltflächen - Kurzanleitung
Eine Schaltfläche auf einer Webseite ist der Hauptakteur, auf den ein Benutzer nach Auswahl oder Eingabe der erforderlichen Eingaben klickt und die Details übermittelt, um die erforderlichen Informationen zu erhalten. Dieses Tutorial konzentriert sich auf zehn Haupt-CSS-Bibliotheken, um Schaltflächen großartig zu machen, nämlich:
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.
Pushy Buttons - Die Pushy Buttons-Bibliothek ist eine kleine CSS Pressable Buttons-Bibliothek.
btns.css - Die Schaltflächenbibliothek btns.css besteht aus einer Reihe von CSS-Schaltflächen, die glatte Übergänge verwenden.
Social Buttons - Die Social Buttons-Bibliothek besteht aus einer Reihe von CSS-Schaltflächen, die in reinem CSS erstellt wurden und auf Bootstrap und Font Awesome basieren.
Beautons- 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.
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 -
Im Folgenden sind die verschiedenen Stile aufgeführt, die in bttn.css verfügbar sind
| Sr. Nr. | Stil | Mittlere Größe | Primärfarbe | Demo |
|---|---|---|---|---|
| 1 | bttn-schräg | bttn-md | bttn-primary | |
| 2 | bttn-unite | bttn-md | bttn-primary | |
| 3 | Bttn-Pille | bttn-md | bttn-primary | |
| 4 | bttn-float | bttn-md | bttn-primary | |
| 5 | bttn-material-flat | bttn-md | bttn-primary | |
| 6 | Bttn-Material-Kreis | bttn-md | bttn-primary | |
| 7 | bttn-fill-circle | bttn-md | bttn-primary | |
| 8 | Bttn-Gradient | bttn-md | bttn-primary | |
| 9 | Bttn-Gelee | bttn-md | bttn-primary | |
| 10 | Bttn-Stretch | bttn-md | bttn-primary | |
| 11 | bttn-minimal | bttn-md | bttn-primary | |
| 12 | bttn-begrenzt | bttn-md | bttn-primary | |
| 13 | bttn-einfach | bttn-md | bttn-primary |
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 -
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 -
Die Social Buttons-Bibliothek besteht aus einer Reihe von CSS-Schaltflächen, die in reinem CSS erstellt wurden und auf Bootstrap und Font Awesome basieren.
Laden der sozialen Schaltflächen
Laden Sie zum Laden der Bibliothek bootstrap-social.css die Datei bootstrap-social.css von github herunter und fügen Sie die folgende Zeile in den Abschnitt <head> der Webseite ein.
<head>
<link rel = "stylesheet" href = "bootstrap-social.css">
</head>Verwenden der Taste
Erstellen Sie eine Schaltfläche mit dem HTML-Ankertag und fügen Sie die Stile btn, btn-block mit dem Social Specifier btn-social hinzu.
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel = "stylesheet" href = "/css_buttons/bootstrap-social.css">
</head>
<body>
<a class = "btn btn-block btn-social btn-twitter">
<span class = "fa fa-twitter"></span>
Login with Twitter
</a>
</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/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel = "stylesheet" href = "/css_buttons/bootstrap-social.css">
</head>
<body>
<a class = "btn btn-block btn-lg btn-social btn-twitter">
<span class = "fa fa-twitter"></span>
Login with Twitter
</a>
<a class = "btn btn-block btn-md btn-social btn-twitter">
<span class = "fa fa-twitter"></span>
Login with Twitter
</a>
<a class = "btn btn-block btn-sm btn-social btn-twitter">
<span class = "fa fa-twitter"></span>
Login with Twitter
</a>
<a class = "btn btn-block btn-xs btn-social btn-twitter">
<span class = "fa fa-twitter"></span>
Login with Twitter
</a>
</body>
</html>Es wird die folgende Ausgabe erzeugt -
Nur die Symbole verwenden
Das folgende Beispiel zeigt, wie Sie Schaltflächen nur für Symbole auswählen.
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel = "stylesheet" href = "bootstrap-social.css">
</head>
<body>
<a class = "btn btn-social-icon btn-twitter">
<span class = "fa fa-twitter"></span>
</a>
</body>
</html>Es wird die folgende Ausgabe erzeugt -
Im Folgenden sind die verschiedenen Stile aufgeführt, die in den sozialen Schaltflächen verfügbar sind.
| Sr.Nr. | Stil | Mittlere Größe | Taste | Icon Button |
|---|---|---|---|---|
| 1 | BTN-Twitter | btn-md | Loggen Sie sich mit Twitter ein | |
| 2 | BTN-Bitbucket | btn-md | Loggen Sie sich mit Bitbucket ein | |
| 3 | BTN-Dropbox | btn-md | Melden Sie sich mit Dropbox an | |
| 4 | BTN-Facebook | btn-md | Mit Facebook einloggen | |
| 5 | btn-btn-flickr | btn-md | Loggen Sie sich mit Flickr ein | |
| 6 | btn-btn-foursquare | btn-md | Melden Sie sich mit Foursquare an | |
| 7 | btn-btn-github | btn-md | Loggen Sie sich mit Github ein | |
| 8 | btn-btn-google | btn-md | Melden Sie sich mit Google an | |
| 9 | btn-btn-instagram | btn-md | Logge dich mit Instagram ein | |
| 10 | BTN-BTN-Linkedin | btn-md | Login mit LinkedIn | |
| 11 | BTN-BTN-Microsoft | btn-md | Melden Sie sich mit Microsoft an | |
| 12 | btn-btn-odnoklassniki | btn-md | Loggen Sie sich mit Odnoklassniki ein | |
| 13 | btn-btn-openid | btn-md | Melden Sie sich mit Openid an | |
| 14 | btn-btn-pinterest | btn-md | Logge dich mit Pinterest ein | |
| 15 | btn-btn-reddit | btn-md | Melden Sie sich mit Reddit an | |
| 16 | BTN-BTN-Soundcloud | btn-md | Melden Sie sich mit Soundcloud an | |
| 17 | btn-btn-tumblr | btn-md | Loggen Sie sich mit Tumblr ein | |
| 18 | btn-btn-twitter | btn-md | Loggen Sie sich mit Twitter ein | |
| 19 | btn-btn-vimeo | btn-md | Loggen Sie sich mit Vimeo ein | |
| 20 | btn-btn-vk | btn-md | Login mit Vk | |
| 21 | btn-btn-yahoo | btn-md | Melden Sie sich mit Yahoo an |
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.