Entwicklung & Design

Kostenlose PSD-Vorlagen: 15 Button-Templates für deine Projekte

(Grafik: Shutterstock)

Buttons können das Erscheinungsbild einer Website entscheidend mit prägen, im guten wie im schlechten Sinne. Eine kleine Auswahl optisch besonders gut gelungener Exemplare in Form von kostenlosen PSD-Vorlagen stellen wir euch in diesem Artikel vor.

Egal, ob als Verweis zu Social-Media-Anwendungen, zum Starten einer Suchanfrage oder Absenden eines Kommentars – kaum eine Website, kaum ein Blog, Webshop oder Content-Management-System kommt ohne Buttons aus. Das ist mitunter ganz gut so.

HTML5 und CSS3 bieten heute von Haus aus schon diverse Möglichkeiten, mit Rundungen, Schatten, Transparenzen und anderen Spielereien gelungene Schaltflächen zu gestalten. Mit Anwendungen wie Photoshop sind der Kreativität keine Grenzen gesetzt und für grau-triste, uninspirierte Buttons gibt es eigentlich keine Entschuldigung mehr.

Ausgewählte Button-Designs im PSD-Format

Wir haben uns für euch nach sehenswerten Beispielen auf die Suche gemacht und tragen euch hier eine kleine, aber feine Auswahl von Buttons vor. Die gezeigten Vorlagen liegen alle im PSD-Format vor, sodass sie direkt übernommen oder bearbeitet werden oder auch als Inspiration dienen können.

Links zu den Websites, auf denen die PSD-Dateien zum Download bereitstehen, befinden sich in den Bildunterschriften sowie in den Beschreibungen in der Bildergalerie. Die ausgewählten PSD-Files sind allesamt sorgsam gegliedert und akkurat beschriftet, was die Wiederverwendung und das Editieren vereinfacht.

E-Commerce-Button-Set

Hier steht ein text

Set aus Social Media und Download-Buttons sowie Call-to-Action Slogans: http://sixrevisions.com.

Diese Zusammenstellung von Buttons aus dem E-Commerce-Kontext besticht durch harmonische Farbverläufe, Schattierungen, Beleuchtungseffekte und kraftvolle Farben. Das Set beinhaltet neben den hier im Bild dargestellten Buttons noch als Handschriften animierte Call-to-Action Slogans, die sich mit den Buttons kombinieren lassen.

UI-Komplettpaket White&Blue

Hier ein anderer Text

User Interface Komplettpaket in blau und grau:  http://www.psdchest.com.

Das farblich in modernem Blau-Grau gehaltene Set an UI-Elementen beinhaltet neben klassischen Buttons noch diverse weitere Elemente wie Lautstärkeregler, Checkboxen oder Toggle-Buttons. Somit bietet diese Zusammenstellung für jeden Anwendungsfall eine sorgfältig gearbeitete Lösung, die sich auch als Komplettpaket verwenden lässt.

Farbenfrohe Buttons für unterschiedliche Anwendungen

ebenso text

Sechs kostenlose PSD-Vorlagen für Buttons für verschiedene Zwecke: http://tempees.com.

Dieses kleine, aber feine Set beinhaltet nur sechs Buttons, die dafür aber umso gelungener gestaltet sind. Die Darstellung der Icons ist sehr präzise und und die gewählten Symbole aussagekräftig. Die Schattierungen der Schaltflächen hinterlassen ebenso wie die Beleuchtungseffekte einen sehr hochklassigen Eindruck.

Sticker-Button-Set

test

Verschiedenste Buttons im zweidimensionalen Sticker-Stil: http://xoo.me.

Ohne den Einsatz von Schlagschatten wirken die Buttons zweidimensional wie Sticker. Die Gestaltung der Icons ist teils sehr minimalistisch, bei den Buttons, die zum Dateidownload anregen, wiederum sehr präzise und detailliert.

Toggle-Buttons für soziale Netzwerke

text

Toggle-Buttons für neun Social Media Sites: http://xoo.me.

Die hier dargestellte Sammlung besteht aus 18 Toggle-Buttons von neun verschiedenen Social-Media-Sites. Zu jedem Button wird jeweils der aktivierte und der deaktivierte Status dargestellt. Die Icons sind präzise gestaltet und erwecken durch die Schattierungen die Illusion von Dreidimensionalität.

Kostenlose PSD-Vorlagen: 10 weitere Button-Templates für Photoshop

1 von 10

Noch mehr kostenlose PSD-Vorlagen

Weitere sehenswerte für die Bearbeitung in Photoshop erstellte Vorlagen findet ihr zum Beispiel in unseren Artikeln „Diese 15 Web-Templates musst du gesehen haben“ oder „10 kostenlose Logo-Vorlagen, die das Designerherz höher schlagen lassen“.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

5 Kommentare
Matze
Matze

Willkommen in den 90ern !

Antworten
Kort Inaten
Kort Inaten

Das dachte ich mir auch. Das Design der vorgestellten Elemente ist altbacken und obsolet.

Antworten
WeSiDe

Spätestens seit den CSS3-Möglichkeiten sind grafische Buttons generell überflüssig.

Benny Lava
Benny Lava

Wird schon seinen Grund haben, warum die kostenlos sind.

Antworten
https://hipp.design
https://hipp.design

Lieber graue bzw. einfarbige Buttons als diese hier.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung