6 nützliche CSS-Schaltfläche Rezepte, die Sie kopieren und einfügen können

CSS3 verändert das Spiel für das Erstellen von Schaltflächen im Web vollständig. Techniken, die früher nur mit Bildern möglich waren, sind jetzt mit nur wenigen Codezeilen leicht ausführbar. Für diesen Beitrag haben wir sechs ansprechend gestaltete CSS-Schaltflächen für Sie erstellt, die Sie direkt in Ihre Projekte kopieren und einfügen können, wobei keine Zuordnung erforderlich ist.

Wie bei allem, was gut in CSS3 ist, funktionieren die folgenden Schaltflächen in Webkit- und Mozilla-Browsern hervorragend. Verschiedene IE-Versionen werden jedoch unzureichend sein.

Ein kurzer Hinweis zur Semantik

Die folgenden Beispiele sind in HTML stark ausgeprägt und viele davon könnten leicht schlanker sein. Ich habe sie so strukturiert, dass ich das CSS für die verschiedenen Teile des Buttons schön und getrennt halten konnte. Auf diese Weise können Sie verschiedene Teile der Beispiele unten kombinieren. Wenn Sie eine dieser Funktionen implementieren, sollten Sie sich sowohl CSS als auch HTML genau ansehen, um zu sehen, ob Sie Fett abschneiden können.

Abgerundeter Button: Zwei Zeilen

Manchmal schneidet eine einzelne Textzeile ihn einfach nicht aus. Verwenden Sie diese Schaltfläche, wenn Sie viel zu sagen haben und ihn auf engstem Raum verstauen möchten. Für das Styling habe ich einen Farbverlauf von # 99CF00 bis # 6DB700 und einige einfache Randbehandlungen verwendet.

HTML

<h3>Jetzt kostenlos anmelden!</h3> <p>Kostenlose 30-Tage-Testversion.</p>

CSS

.button {/ * grundlegende Styles * / width: 250px; Höhe: 50px; Farbe weiß; Hintergrundfarbe: # 99CF00; Text ausrichten: Mitte; Schriftgröße: 30px; Zeilenhöhe: 50px; / * Verlaufsstile * / Hintergrund: -webkit-gradient (linear, 0% 0%, 0% 100%, von (# 99CF00) bis (# 6DB700)); Hintergrund: -moz-linearer Gradient (19%, 75%, 90 °, # 6DB700, # 99CF00); / * border styles * / border-left: fest 1px # c3f83a; Border-Top: fest 1px # c3f83a; rechts: fest 1px # 82a528; Rahmen unten: fest 1px # 58701b; -moz-border-radius: 10px; -webkit-border-radius: 10px; Grenzradius: 10px; -webkit-gradient (linear, 0% 0%, 0% 100%, von (# 99CF00) bis (# 6DB700))} .button h3 {font-size: 20px; Zeilenhöhe: 35px; Schriftfamilie: helvetica, serifenlos; } .button p {font-size: 12px; Zeilenhöhe: 4px; Schriftfamilie: helvetica, serifenlos; } eine {Textdekoration: keine; Farbe: fff; } .button: hover {Hintergrund: -webkit-gradient (linear, 0% 0%, 0% 100%, von (# 6DB700) bis (# 99CF00)); Hintergrund: -moz-linearer Gradient (19% 75% 90 Grad, # 99CF00, # 6DB700); }

Rote Pille

Dieser einfache, aber attraktive rote Knopf verwendet stark abgerundete Ecken, um ihm eine pillenartige Form zu geben. Sie finden einen Hintergrundverlauf von # d46d45 zu # b1432a und einige leichte Randeffekte oben und unten. Wieder ist der Hover-Effekt einfach ein umgekehrter Effekt.

HTML

<p>Drück mich!</p>

CSS

.button {/ * grundlegende Styles * / width: 250px; Höhe: 50px; Farbe weiß; Hintergrundfarbe: # d46d45; Text ausrichten: Mitte; Schriftgröße: 30px; Zeilenhöhe: 50px; / * gradient styles * / background: -webkit-gradient (linear, 0% 0%, 0% 100%, von (# d46d45) bis (# b1432a)); Hintergrund: -moz-linearer Gradient (19% 75% 90 °, # b1432a, # d46d45); / * border styles * / border-top: fest 2px # e28d79; Rahmen unten: fest 1px # 51281f; Rahmen rechts: fest 1px # d46d45; Rahmen links: fest 1px # d46d45; -moz-border-radius: 30px; -webkit-border-radius: 30px; Grenzradius: 30px; } .button p {font-size: 25px; Zeilenhöhe: 50px; Schriftfamilie: 'Trebuchet MS', serifenlos; } eine {Textdekoration: keine; Farbe: fff; } .button: hover {Hintergrund: -webkit-gradient (linear, 0% 0%, 0% 100%, von (# b1432a) bis (# d46d45)); Hintergrund: -moz-linearer Gradient (19% 75% 90 Grad, # d46d45, # b1432a); Border-Top: fest 2px # b1432a; Rahmen unten: fest 1px # e28d79; }

Dunkler Letterpress

Hier habe ich eine Letterpress-Technik verwendet, um einen Inset-Look im Text zu erzielen. Grundsätzlich müssen Sie den Text dunkler als den Hintergrund machen und ihm dann einen hellen Schatten geben. Für den Hover-Effekt habe ich nur die Farben etwas aufgehellt.

HTML

<p>Schaltfläche "Einfügen"</p>

CSS

.button {/ * grundlegende Styles * / width: 250px; Höhe: 70px; Farbe: # 171717; Hintergrundfarbe: # 4f4f4f; Text ausrichten: Mitte; Schriftgröße: 30px; Zeilenhöhe: 50px; / * gradient styles * / background: -webkit-gradient (linear, 0% 0%, 0% 100%, von (# 4f4f4f) bis (# 1d1d1d)); Hintergrund: -moz-linearer Gradient (19% 75% 90 °, # 1d1d1d, # 4f4f4f); / * border styles * / border-top: fest 2px # 8f8f8f; Rahmen unten: fest 2px # 1a1a1a; Rahmen links: fest 2px # 4f4f4f; Rand rechts: fest 2px # 4f4f4f; -moz-border-radius: 10px; -webkit-border-radius: 10px; Grenzradius: 10px; } .button p {font-size: 30px; Zeilenhöhe: 70px; Schriftfamilie: Verdana, Sans-Serif; Schriftdicke: fett; Text-Schatten: 0px 2px 3px # 444; } eine {Textdekoration: keine; Farbe: fff; } .button: hover {Hintergrund: -webkit-gradient (linear, 0% 0%, 0% 100%, von (# 616161) bis (# 292929)); Hintergrund: -moz-linearer Gradient (19% 75% 90 Grad, # 292929, # 616161); Border-Top: fest 2px # 8f8f8f; Rahmen unten: fest 2px # 282828; } .button p: hover {text-shadow: 0px 2px 3px # 555; }

Schwarze Schönheit

Für diesen Button wollte ich unbedingt etwas Glatteres und Klassisches schaffen. Um dies zu erreichen, habe ich drei Tricks implementiert. Zuerst habe ich einige gestoppte Farbverläufe angewendet, um dieses glänzende Aussehen zu erzielen. Als Nächstes habe ich einen inneren Schatten angewendet, der ein großartiger Trick ist, um Tiefe und Lichteffekte hinzuzufügen. Zum Schluss habe ich durch den Einsatz eines Textschattens einen leichten Schimmer angewendet.Beim Schweben reduziere ich den Schein und intensiviere den Schatten.

HTML

<p>Glänzender Glanz</p>

CSS

.button {/ * grundlegende Styles * / width: 250px; Höhe: 70px; Farbe: #fff; Hintergrundfarbe: # 000; Text ausrichten: Mitte; Schriftgröße: 30px; Zeilenhöhe: 50px; / * Farbverlauf * / Hintergrund: -webkit-Farbverlauf (linear, links oben, links unten, Farbstopp (0, # 2f2f2f), Farbstopp (.5, # 1e1f1f), Farbstopp (.51, # 0c0c0c) bis (# 000)); Hintergrund: -moz-linearer Gradient (oben, # 2f2f2f, # 1e1f1f 50%, # 0c0c0c 51%, # 000); / * border styles * / border-top: fest 2px # 555; Rand unten: fest 2px # 111; -moz-box-shadow: Einfügung 0 0 15px # 000000; -webkit-box-shadow: Einfügung 0 0 15px # 000000; Box-Schatten: Einfügung 0 0 15px # 000000; } .button p {font-size: 30px; Zeilenhöhe: 70px; Schriftfamilie: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", serifenlos; Schriftgewicht: 300; Text-Schatten: 0px 0px 3px # 888; } eine {Textdekoration: keine; Farbe: fff; } .button: hover {-moz-box-shadow: Einfügung 0 0 50px # 000000; -webkit-box-shadow: Einfügung 0 0 50px # 000000; Box-Schatten: Einfügung 0 0 50px # 000000; } .button p: hover {text-shadow: 0px 0px 3px # 444; }

Blaue Pille mit Symbol

Die blaue Pillenschaltfläche kombiniert die glänzenden Formen der vorherigen Schaltfläche mit der Form der roten Pille von oben. Ich habe wieder einige glänzende Farbverläufe und im inneren Schatten verwendet, aber um die Dinge interessanter zu machen, fügte ich ein Symbol hinzu: ein kleines Bleistift. Das Tolle an diesem Symbol ist, dass keine speziellen Schriftarten erforderlich sind, nur HTML! Es ist eine nette kleine Ergänzung, die einen Kontaktknopf ohne Anstrengung aufpeppen kann.

HTML

<p>Schreiben Sie uns ✎ </p>

CSS

.button {/ * grundlegende Styles * / width: 250px; Höhe: 50px; Farbe: #fff; Hintergrundfarbe: # 125182; Text ausrichten: Mitte; Schriftgröße: 30px; Zeilenhöhe: 50px; / * gradient-stile * / background: -webkit-gradient (linear, links oben, links unten, color-stop (0, # 125182), color-stop (.5, # 1269ab), color-stop (.51, # 004375) bis (# 00345b)); Hintergrund: -moz-linearer Gradient (oben, # 125182, # 1269ab 50%, # 004375 51%, # 00345b); / * border styles * / -moz-border-radius: 30px; -webkit-border-radius: 30px; Grenzradius: 30px; -moz-box-shadow: Einfügung 0 0 10px # 000000; -webkit-box-shadow: Einfügung 0 0 10px # 000000; Box-Schatten: Einfügung 0 0 10px # 000000; } .button p {font-size: 30px; Zeilenhöhe: 50px; Schriftfamilie: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", serifenlos; Schriftgewicht: 300; Text-Schatten: 0px 0px 3px # 555; } eine {Textdekoration: keine; Farbe: fff; } .button: hover {-moz-box-shadow: Einfügung 0 0 50px # 000000; -webkit-box-shadow: Einfügung 0 0 50px # 000000; Box-Schatten: Einfügung 0 0 50px # 000000; } .button p: hover {text-shadow: 0px 0px 3px # 888; }

Gefällt mir / mag keine Knöpfe

Hier habe ich zwei kreisförmige Buttons erstellt, die für die Implementierung eines einfachen Bewertungssystems gedacht sind. Der grüne Knopf bedeutet eine positive und der rote eine negative. Wie bei der letzten Schaltfläche handelt es sich bei den Symbolen nur um HTML und es sind keine @ font-face-Tricks erforderlich.

HTML

<p>☝</p> <p>☟</p>

CSS

.green {Hintergrundfarbe: # 00ab26; } .red {Hintergrundfarbe: # d90004; } .button {/ * grundlegende Stile * / width: 100px; Höhe: 100px; Farbe: #fff; Text ausrichten: Mitte; Schriftgröße: 30px; Zeilenhöhe: 50px; Schwimmer: links; Rand rechts: 20px; / * Verlaufsstile * / / * Randstile * / -moz-border-radius: 50px; -webkit-border-radius: 50px; Grenzradius: 50px; / * Schattenstile * / -moz-box-shadow: 2px 3px 5px #bfbfbf; -webkit-box-shadow: 2px 3px 5px #bfbfbf; Box-Schatten: 2px 3px 5px #bfbfbf; } .button p {font-size: 50px; Zeilenhöhe: 100px; Schriftfamilie: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", serifenlos; Schriftgewicht: 300; Text-Schatten: 0px 0px 3px # 888; } eine {Textdekoration: keine; Farbe: fff; } .button: hover {-moz-box-shadow: Einfügung 0 0 30px # 444; -webkit-box-shadow: Einfügung 0 0 30px # 444; Box-Schatten: Einfügung 0 0 30px # 444; } .button p: hover {text-shadow: 0px 0px 4px #fff; }

Fazit

Ich hoffe, dass diese Tasten für Sie nützlich sind. Auch wenn Browserbeschränkungen bewirken, dass einige davon nicht ganz implementierungsbereit sind, bieten sie dennoch hervorragende Lernbeispiele für einige der großartigen neuen Funktionen von CSS3.

Hinterlasse einen Kommentar und lass uns wissen, was du denkst!