Kategorien
Essentials Icons & Fonts Inspiration Showcases Webdesign

UI mit Hui-Faktor: 40 hochwertige Schaltflächen und PSD-Tipps für eigene Buttons

Der Button ist ein kleines, doch recht wichtiges Designelement einer Website. Oftmals soll er eine Aktion des Besuchers als „Call-To-Action“ auslösen, muss also gut sichtbar und selbsterklärend sein. Wir haben gleich 40 sehr gute Photoshop-Tutorials zusammengestellt, die zu eleganten, minimalistischen und manchmal auch verspielten Ergebnissen führen. So gelangen Sie zu Buttons, die etwas abgewandelt sofort für eigene Projekte eingesetzt werden können. Wie gewohnt, haben wir unsere Sammlung um einige eigene Tipps für den Photoshopper ergänzt…

Quick Tip: Design a Pretty Dropdown Button in Photoshop

Designer: Patrik Larsson
Website: webdesign.tutsplus.com

photoshop-buttons1

© Patrik Larsson


Photoshop Calculater Button Logo Icon

Designer: adobeperson.com
Website: adobeperson.com

photoshop-buttons2

© adobeperson.com

Create an icon of the short message in several simple steps (Original Tutorial)

Designer: 4-designer.com
Website: 4-designer.com

photoshop-buttons3

© 4-designer.com

Glossy-Style Carbon Fibre Navigation Buttons

Designer: Photoshop Star Staff
Website: photoshopstar.com

photoshop-buttons4

© Photoshop Star Staff

Photoshop For Beginners: Creating buttons for web

Designer: Sebastiano
Website: wegraphics.net

photoshop-buttons5

© Sebastiano

Learn To Make Photo-Realistic Volume knob in Photoshop

Designer: Shaina
Website: tutorialized.com

photoshop-buttons6

© Shaina

Deep Analysis on How to Create a High-precision Button

Designer: 4-designer.com
Website: 4-designer.com

photoshop-buttons7

© 4-designer.com

Design a Delicious, Shining Circle Play (Web) Button in Photoshop

Designer: psdvault.com
Website: psdvault.com

photoshop-buttons8

© psdvault.com

Create beautiful buttons in Photoshop

Designer: thethemefoundry.com
Website: thethemefoundry.com

photoshop-buttons9

© thethemefoundry.com

Glossy buttons tutorial

Designer: AlonDiviX
Website: alondivix.deviantart.com

photoshop-buttons10

© AlonDiviX

 

Dr.Web Buttontrend #1: Wie gezeichnet

Eine Option, wie ein Button mal ganz anders wirken kann, ist diesen von Hand zu zeichnen oder die Zeichnung in Photoshop oder Illustrator zu simulieren. In Photoshop erstellen Sie einen Pfad, den Sie mit einer passenden Werkzeugspitze nachzeichnen lassen. Dazu gehen Sie im Pfadbedienfeld unten auf die Schaltfläche Pfadkontur mit Pinsel füllen.

buttontrend1

 

Design a Beautifully Detailed Web Button

Designer: Liam McCabe
Website: webdesign.tutsplus.com

photoshop-buttons11

© Liam McCabe

Clean White Navigation Bar

Designer: James Hewett
Website: photoshoptutorials.ws

photoshop-buttons12

© James Hewett

Professional Menu Button

Designer: Photoshop Star Staff
Website: www.photoshopstar.com

photoshop-buttons13

© Photoshop Star Staff


Create a Nice Stylish Glossy Button in Photoshop

Designer: coregfx.org
Website: coregfx.org

photoshop-buttons14

© coregfx.org

Blue on Black Navigation Bar

Designer: James Hewett
Website: photoshoptutorials.ws

photoshop-buttons15

© James Hewett

Create a Wii Web Header in Photoshop

Designer: originmaker.com
Website: originmaker.com

photoshop-buttons16

© originmaker.com

Glass Button
Photoshop Tutorial

Designer: yourphotoshopguide.com
Website: yourphotoshopguide.com

photoshop-buttons17

© yourphotoshopguide.com

Principles for Successful Button Design

Designer: Pete Orme
Website: webdesign.tutsplus.com

photoshop-buttons18

© Pete Orme

Create a Realistic Telephone Keypad Using Layer Styles

Designer: Jim Nielsen
Website: design.tutsplus.com

photoshop-buttons19

© Jim Nielsen

Photoshop Buzline Button Logo Icon

Designer: goodbus
Website: tutorialagent.com

photoshop-buttons20

© goodbus

 

Dr.Web Buttontrend #2: Grundform

Ein leichter Weg hin zum eigenen Button führt über eine Grundform, die Sie etwa über das Abgerundete-Rechteck-Werkzeug aufziehen. Die Farbe bestimmen Sie über die aktuelle Vordergrundfarbe, die Rundung in der Optionsleiste unter Radius. Leicht können Sie Ihre Schaltfläche beschriften und mit weiteren Formen kombinieren, für einen schönen 2D-Look im Flat-Design.

buttontrend2

 

Web Button Making Tutorial 1

Designer: easydisplayname
Website: easydisplayname.deviantart.com

photoshop-buttons21

© easydisplayname

RSS button

Designer: adobetutorialz.com
Website: adobetutorialz.com

photoshop-buttons22b

© adobetutorialz.com

Design a Textured Button in Photoshop

Designer: Caleb Kimbrough
Website: bittbox.com

photoshop-buttons23

© Caleb Kimbrough

Perfect Shine Button or Icon

Designer: boon
Website: boonage.pjss2.net

photoshop-buttons24

© boon

Design panic button logo icon in photoshop

Designer: gnews
Website: adobeperson.com

photoshop-buttons25

© gnews

Quick Tip: Create a Round Switch Button in Photoshop

Designer: Paul Flavius
Website: design.tutsplus.com

photoshop-buttons26

© Paul Flavius

Stylish Metallic Button in Photoshop

Designer: abduzeedo
Website: abduzeedo.com

photoshop-buttons27

© abduzeedo

Glossy Web 2.0 Button

Designer: avivadirectory.com
Website: avivadirectory.com

photoshop-buttons28

© avivadirectory.com

How to Design an Inset Button in Photoshop

Designer: paper-leaf.com
Website: paper-leaf.com

photoshop-buttons29

© paper-leaf.com

Nice ‘n’ Simple Subscribe Badges

Designer: Photoshop Star Staff
Website: photoshopstar.com

photoshop-buttons30

© Photoshop Star Staff

 

Dr.Web Buttontrend #3: Buttonserie

Sehr praktisch ist auch die Buttonserie. Wir sparen uns Zeit bei der Umsetzung und gehen sicher, dass alle Buttons gut zusammen passen. Eine Grundform wird dazu unterteilt und mit einigen Icons ausgestattet, die komplexer sein können oder wie hier, eher minimalistisch. Selbst einen Mouseover-Zustand können Sie schön in Photoshop simulieren.

buttontrend3

 

Photoshop Tutorials for Beginners – How To Create Simple Flat Button

Designer: Dropcolors Studio
Website: youtube.com

photoshop-buttons31

© Dropcolors Studio

Photoshop Tutorial: Interface Style – Indented Rim

Designer: Stratzeh
Website: youtube.com

photoshop-buttons32

© Stratzeh

Animated Glowing Button in Photoshop CS6 | IceflowStudios

Designer: Howard Pinsky
Website: youtube.com

photoshop-buttons33

© Howard Pinsky

Photoshop Tutorial: Create a Glossy Button

Designer: RiverCityGraphix
Website: youtube.com

photoshop-buttons34

© RiverCityGraphix

Create a Simple Record Button — Photoshop Tutorial

Designer: tutvid
Website: youtube.com

photoshop-buttons35

© tutvid

Photoshop Tutorial #179 – Creating a shiny button with inset text

Designer: Art Starter
Website: youtube.com

photoshop-buttons36

© Art Starter

Adobe Photoshop Tutorial – Interface And Orb Tutorial – FPST

Designer: FlewDesigns – Photoshop Tutorials
Website: youtube.com

photoshop-buttons37

© FlewDesigns – Photoshop Tutorials

Cable/Tube – Photoshop-Tutorial

Designer: Grufix-Board.de – Dein Tutorial-Kanal
Website: youtube.com

photoshop-buttons38

© Grufix-Board.de – Dein Tutorial-Kanal

Create Slick Web Tags — Photoshop CS5 Tutorial

Designer: tutvid
Website: youtube.com

photoshop-buttons39

© tutvid

Photoshop: Carbon Fiber Power Button | IceflowStudios

Designer: Howard Pinsky
Website: youtube.com

photoshop-buttons40

© Howard Pinsky

(dpe)

Kategorien
Design HTML/CSS UI/UX

Buttons: Einfache CSS-Bibliothek zur Erstellung vielfältiger Schaltflächen

JavaScript- und Ruby-Entwickler Alex Wolfe aus San Francisco legt mit Buttons eine CSS-Bibliothek vor, die sich um nichts anderes als um die einfache, aber variantenreiche Gestaltung von Schaltflächen auf Websites kümmert. Buttons entsteht unter Verwendung von Sass und Compass, wobei man von diesen beiden Begriffen nur dann etwas gehört haben muss, wenn man die Buttons-Bibliothek an seine persönlichen Bedürfnisse anpassen will. Will man das nicht, reichen CSS-Grundkenntnisse…

Buttons: Einfache CSS-Bibliothek zur Erstellung vielfältiger Schaltflächen

Buttons: Einfach mit CSS, etwas aufgemotzt mit Font Awesome und getunt mit jQuery

Neun verschiedene Button-Styles erstellte Wolfe, darunter auch einen Satz im beliebter werdenden Flat Design. Die Verwendung aller verfügbaren Varianten ist sehr einfach. Hierzu bedarf es lediglich des Befolgens der vorgegebenen Syntax. Button-Styles werden als Klassen übergeben. Wolfe hat sich dabei dafür entschieden, normal sprachliche Bezeichnungen zu verwenden. Darüber lässt sich streiten. Grundsätzlich zeigen sich alle virteullen Knöpfe in diesem Farbschema:

Buttons: Einfache CSS-Bibliothek zur Erstellung vielfältiger Schaltflächen

Wieso die farbigen Buttons nun auf die Bezeichner primary, action, highlight, caution und royal hören, ist letztlich nicht vollständig nachvollziehbar. Insbesondere die Kombination des Bezeichners royal mit der Farbe Violett gibt mir doch Rätsel auf. Aber gut, betrachten wir es als eine Art Vokabeln. Die muss man nicht verstehen, die muss man nur wissen.

Neben den Knöpfen im Flat Design gibt es noch welche mit Glow-Effekt (einem farbigen Schein außen rum), gewölbte, runde und etliche mehr. Will man Icons innerhalb der Elemente einsetzen, ist es erforderlich, Font Awesome mit einzubinden. Die erforderlichen Dateien werden mitgeliefert.

Um Schaltflächen mit Drop-Down-Optionsmenüs zu verwenden, auch das bietet das Framework, ist es erforderlich, die mitgelieferte JavaScript-Datei einzubinden. jQuery wird nicht mitgeliefert, aber ebenfalls vorausgesetzt. Natürlich lassen sich alle Varianten kombinieren.

Zusätzlich enthält das Framework noch einige Wrapper, mit denen man beispielsweise die skeuomorphe Optik einer Türklingel nachbilden kann.

Buttons: Einfache CSS-Bibliothek zur Erstellung vielfältiger Schaltflächen

Wollen Sie sich mit den von Wolfe gelieferten Standards nicht zufrieden geben, benötigen Sie Sass und Compass nebst der entsprechenden Kenntnisse, um im Sourcecode rumzuschrauben. Wolfe erweitert sein Projekt allerdings ebenfalls kontinuierlich. Vielleicht tut es schon etwas Geduld.

So sehen die bisher verfügbaren Schaltflächen im Überblick aus:

Buttons: Einfache CSS-Bibliothek zur Erstellung vielfältiger Schaltflächen

Buttons steht auf Github zum kostenlosen Download und unter Apache Lizenz 2.0 zur kostenfreien Verwendung auch in kommerziellen Projekten zur Verfügung.

Links zum Beitrag

Kategorien
Design HTML/CSS Inspiration Showcases Tutorials

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)