Anzeige
Smartes Hosting für anspruchsvolle Projekte.
↬ Loslegen und vServer testen ↬ Jetzt testen!
Dirk Metzmacher 26. Juni 2013

Webdesigners Mitnahme-Markt: 40 CSS-Buttons, Beispiele, Tutorials und Code-Schnipsel

Reine CSS-Button und -Menüs benötigen keine Grafiken mehr, sondern formen sich aus der Schönheit des geschriebenen Codes. Doch die Erstellung kann ganz schön knifflig werden, wenn Sie an eine umfassende Browser-Kompatibilität denken. Wie gut, dass es Tutorials, fertige Code-Schnipsel und zahlreiche Beispiele dafür gibt. Und noch besser, dass wir die besten Beispiele auch gleich in diesem Beitrag präsentieren.

Lust auf eine Dosis Photoshop?

Alle Buttons sind für private und kommerzielle Zwecke freigegeben. Da sich Nutzungsbedingungen stets ändern können, sollten Sie vor der konkreten Verwendung die aktuelle Lizenz noch einmal überprüfen. Sicher ist sicher.

CSS Buttons with Pseudo-elements

Urheber: Sergio Camalich
Website: tympanus.net

Sergio zeigt gleich die Entstehung einer ganzen Button-Serie. In einem Tutorial werden diese erklärt und eine Demo, wie auch der Sourcecode, zum Herunterladen angeboten.

css-button1

© Sergio Camalich

Animated CSS3 Buy now Button

Urheber: Mike
Website: nublue.co.uk

In diesem Einsteiger-Tutorial können wir die Entstehung eines animierten Shop-Buttons verfolgen. So wird der Preis noch einmal angezeigt, wenn der Anwender über der Schaltfläche steht.

css-button2

© Mike

CSS Deck

Urheber: Bartos Lazarski
Website: cssdeck.com

CSS Deck bietet uns verschiedenste CSS-Generatoren an, wobei ich Ihnen diesen schönen Shop-Button vorstellen möchte. HTML- und CSS-Code können leicht kopiert werden.

css-button3

© Bartos Lazarski

How to Create CSS3 Buttons

Urheber: Valeriu Timbuc
Website: designmodo.com

Valeriu Timbuc stellt uns eine ovale Buttonform in verschiedenen Farbvarianten vor. Schritt für Schritt werden in diesem Tutorial die HTML- und CSS-Abschnitte erklärt.

css-button4

© Valeriu Timbuc

Code an Awesome Animated Download Button With CSS3

Urheber: Joshua Johnson
Website: designshack.net

In diesem Tutorial zeigt Joshua Johnson, wie ein Button zwei weitere Flächen bei MouseOver präsentieren kann. Zunächst wird das Konzept erklärt, dann der CSS-Code.

css-button5

© Joshua Johnson

Animated Buttons with CSS3

Urheber: Mary Lou
Website: tympanus.net

In diesem Tutorial wird ein Button in verschiedenen Farbvarianten und mit unterschiedlichen Icons als Blickfang vorgestellt. Sieben Beispiele werden mit dem kompletten CSS-Code durch gespielt.

css-button6

© Mary Lou

40+ CSS Buttons from codepen

Urheber: Codepen
Website: saaraan.com

Gleich 40 verschiedene Buttons werden uns in dieser Kollektion vorgestellt. Da gibt es ganz einfach 2D-Button, bis hin zu komplexen Versionen, wie etwa diese runden Button hier.

css-button7

© Codepen

CSS3 Animated Bubble Buttons

Urheber: Martin Angelov
Website: tutorialzine.com

Der Bubble Button von Martin Angelov zeigt beim MouseOver eine kleine Animation. Ganz dem Namen entsprechend, laufen einige Bubbles schnell über die Fläche des Buttons ab.

css-button8

© Martin Angelov

BonBon

Urheber: simurai
Website: simurai.com

Süße CSS-Button im BonBon-Stil. Eine experimentelle Demo mit 3D-Formen und Glanzeffekten.

css-button9

© simurai

Create a Circle Social Button in CSS3

Urheber: Anli
Website: azmind.com

Runde Social-Buttons mit zentrierten Icons werden in diesem Tutorial beschrieben. Als Besonderheit erscheint um den Button eine Kontur, die farbig umgesetzt wurde.

css-button10

© Anli

CSS3 Buttons With a Glass Edge

Urheber: Rob Alan
Website: robalan.com

Eine neutrale, graue Version und eine knallige, rote Version eines CSS-Buttons hat Rob Alan programmiert. HTML- und CSS-Code werden im Beitrag präsentiert.

css-button11

© Rob Alan

Tutorial: CSS3 push-down Buttons

Urheber: Jo
Website: joquery.com

Die CSS3-Button von Jo stehen zunächst dreidimensional hervor, um bei einem Klick wie die Tasten einer Tastatur zu reagieren.

css-button12

© Jo

Super Awesome Buttons with CSS3 and RGBA

Urheber: Mark
Website: zurb.com

In diesem Tutorial kommen CSS3- und RGBa-Tricks zum Einsatz, um eine ganze Serie von Buttons in verschiedenen Farben zu gestalten.

css-button13

© Mark

CSS3 Minimalistic Navigation Menu

Urheber: Martin Angelov
Website: tutorialzine.com

Ein CSS3-Menü mit Animation stellt uns Martin Angelov vor. Eine Demo und ein Download stehen neben dem Tutorial bereit, uns zu begeistern.

css-button14

© Martin Angelov

CSS3 Tutorial: Sleek Card Pockets using CSS Only

Urheber: Vince Angeloni
Website: creativefan.com

Im CSS3-Tutorial von Vince Angeloni können wir die Entstehung eines Buttons verfolgen, der zunächst nur teilweise sichtbar ist. Erst beim MouesOver sehen wir den Inhalt des Buttons.

css-button15

© Vince Angeloni

How to Build a Simple Button with CSS Image Sprites

Urheber: Chris Spooner
Website: line25.com

Chris Spooner stellt in diesem Tutorial eine einfache Variante eines CSS-Buttons vor, der Sprites als Basis einsetzt.

css-button16

© Chris Spooner

CSS3 Speech Bubble

Urheber: Sean
Website: sublimeorange.com

Die Demo zeigt, wie aus einem Button schnell eine Sprechblase werden kann. Auch der Code dazu wird präsentiert.

css-button17

© Sean

Advanced CSS Menu

Urheber: Nick La
Website: webdesignerwall.com

In diesem Tutorial finden Sie eine Demo, die Daten als Download und eine ausführliche Beschreibung des Autors, wie dieses Grunge-Menü entstanden ist.

css-button18

© Nick La

3D Buttons in CSS

Urheber: Elad Shechter
Website: coderwall.com

Elad Shechter simuliert die Tastankappen einer Tastatur. Grau, leicht dreidimensional und bei Anklicken der typische Effekt des Reindrückens.

css-button19

© Elad Shechter

How To Create Shiny CSS Buttons

Urheber: Paulund
Website: paulund.co.uk

Etwas HTML, viel mehr CSS und schon steht dieser Button. Als kleine Besonderheit sorgt ein CSS-Schein für ein Highlight.

css-button20

© Paulund

Sliding Tags

Urheber: Thibaut
Website: cssflow.com

Auf cssflow.com können Sie Tags in Button-Form entdecken. Es gibt eine Demo, einen Download und auch einen Artikel, der die Entstehung beschreibt.

css-button21

© Thibaut

Codepen

Urheber: Codepen
Website: codepen.io

Auf codepen.io werden zahlreiche CSS-Buttons und -Menüs vorgstellt. So auch dieses dreidimensionale Menü mit Icons.

css-button22

© Codepen

Inset Side Navigation

Urheber: CSSFlow
Website: cssflow.com

Ein vertikales Menü mit einzelnen Buttons, die auf einer Grundfläche liegen, präsentiert uns CSSFlow. Schauen Sie sich die Demo an oder klicken Sie gleich auf den Download-Button.

css-button23

© CSSFlow

Button Maker

Urheber: CSS-Tricks
Website: css-tricks.com

CSS-Tricks ist ein Button-Generator, der sich über Schieberegler sehr einfach bedienen lässt. Neben der Größe und der Rundheit können Sie Verläufe und MouseOver-Zustände definieren.

css-button24

© CSS-Tricks

App Navigation with Notification Badges

Urheber: CSSFlow
Website: cssflow.com

Eine Menüleiste mit kleinen Badges zur Information, ob es neue Profile oder Nachrichten gibt. Eine Demo und ein Download warten auf Sie.

css-button25

© CSSFlow

CSS Menu Maker

Urheber: CSS Menu Maker
Website: cssmenumaker.com

Der CSS Menu Maker zeigt eine Auswahl von Stilen, die nach einem Klick angepasst werden können. Die Unterteilung erfolgt in Drop Down, Flyout, Vertical, Horizontal und Tabbed.

css-button26

© CSS Menu Maker

Share Buttons

Urheber: CSSFlow
Website: cssflow.com

Schöne 3D-Social-Buttons, die zum Anklicken reizen. Die Anzahl der Empfehlungen in den sozialen Netzen wird dabei angezeigt.

css-button27

© CSSFlow

CSS Menu Generator

Urheber: mycssmenu.com
Website: mycssmenu.com

Wählen Sie aus zahlreichen Vorgaben eine Menügrundlage aus. Diese passen Sie dann in wenigen Schritten an.

css-button28

© mycssmenu.com

Social Buttons

Urheber: CSSFlow
Website: cssflow.com

Einfache Social-Media-Buttons zur leichten Anpassung. Eine Demo und ein Download unterstützen den Anwender.

css-button29

© CSSFlow

Glossy Buttons

Urheber: CSSFlow
Website: cssflow.com

Glänzende CSS-Buttons in verschiedenen Farbvarianten. Demo und Download sind nur einen Klick entfernt.

css-button30

© CSSFlow

Dark and Light Dropdown Lists

Urheber: CSSFlow
Website: cssflow.com

Ein CSS-Button in zwei Varianten: eine helle und eine dunkle Version. Demo und Download sind natürlich auch hier vorhanden.

css-button31

© CSSFlow

CSS Menu Builder

Urheber: CSS Menu Builder
Website: cssmenubuilder.com

Der CSS Menu Builder bietet uns einige fertige horizontale und vertikale Menüs zur Auswahl an. In nur vier Schritte können diese angepasst werden, bis hin zur Beschriftung.

css-button32

© CSS Menu Builder

Dark Button Navigation Using CSS3

Urheber: Monji Dolon
Website: devgrow.com

Nach der Online-Demo und un den Downloaddateien werden CSS- und HTML-Code beschrieben. So entsteht ein vertikales Menü mit einzelnen Buttons auf einer Fläche.

css-button33

© Monji Dolon

Build Awesome Practical CSS3 Buttons

Urheber: Jeffrey Way
Website: tutsplus.com

Jeffrey Way erklärt in diesem Tutorial auf net.tutsplus.com die Programmierung eines CSS-Buttons mit Icon. Auch ein Video-Tutorial unterstützt uns beim Lernen.

css-button34

© Jeffrey Way

Awesome Animated CSS Button Tutorial and Source Code

Urheber: Jay Patel
Website: way2tutorial.com

Sehr schön ist hier der Wechsel vom normalen Button hin zur angeklickten Version zu sehen. Im Tutorial wird das Konstrukt ausführlich erklärt.

css-button35

© Jay Patel

CSS3 Gradient Buttons

Urheber: Nick La
Website: webdesignerwall.com

Nick La zeigt an seiner Webdesignerwall eine Massenproduktion von CSS-Button in verschiedensten Farben und mit unterschiedlichen Rundungen und Größen.

css-button36

© Nick La

Awesome CSS3 & JQUERY Slide Out Button

Urheber: Mary Lou
Website: tympanus.net

Immer öfter wird die Option verwendet, sich über einen bestehenden Account bei Diensten wie Twitter oder Facebook bei neuen Diensten einzuloggen. Dazu wird hier ein passender Button angeboten.

css-button37

© Mary Lou

Nice Menu : CSS Animation & jQuery Animate

Urheber: Hidayat Sagita
Website: webstuffshare.com

Hidayat Sagita stellt nach der Download- und Demo-Option seinen Button in zwei Varianten vor: einmal mit CSS- und einmal mit jQuery-Animation.

css-button38

© Hidayat Sagita

CSS Button Me

Urheber: Caleb Ogden
Website: cssbutton.me

Der Generator CSS Button Me bietet zahlreiche Regler an, etwa zu Border, Gradients, Box Shadow, Font und einige mehr.

css-button39

© Caleb Ogden

Pure CSS social media icons

Urheber: Nicolas Gallagher
Website: nicolasgallagher.com

Reine Social-CSS-Button sind je nach Komplexität sehr schwierig zu gestalten. Nicolas Gallagher zeigt, wie es geht.

css-button40

© Nicolas Gallagher

(dpe)

Dirk Metzmacher

Dirk Metzmacher

Dirk Metzmacher ist der Herausgegeber des Photoshop-Weblogs, sowie Fachjournalist und Photoshop-Profi, dessen Tutorials seit über 12 Jahren Leser von Fachpublikationen wie Galileo Press, DigitalPhoto, Dr.Web, Print24, PSD-Tutorials oder Noupe von den Grundlagen zum Thema Photoshop bis hin zu professionellen Arbeitsweisen begleitet haben. Sein Twitter-Account und seine Facebookseite.

7 Kommentare

  1. Tolle Zusammenstellung, sehr hilfreich. Dank an Dr.Web bzw den Autor für solche Tipps, die es auch Semi-Profies leicht machen einen Einstieg zu finden.

  2. Dem kann ich mich nur anschließen … tolle Auswahl, sehr inspirierend!

    Danke!

  3. So schöne Kommentare! Das freut den Autor! ;-)

  4. Es sind wirklich tolle Sachen dabei. Man weiss gar nicht, was man zuerst anschauen, verwenden oder gar nachbauen soll. Danke!

  5. Hui, das ist ja mal eine nette Sammlung. Vielen Dank für die Mühe all das zusammen zu stellen!

  6. Wow! Wieder eine satte Ladung an Inspiration. Vielen Dank dafür. Werde mich nach und nach durcharbeiten.

    So kann man sich ganz wunderbar ein eigenes Set zusammenstellen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.