Anzeige
Anzeige
Ratgeber
Artikel merken

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

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.

Von Marcel Seer
2 Min. Lesezeit
Anzeige
Anzeige

(Grafik: Shutterstock)

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
5 Kommentare
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

Matze

Willkommen in den 90ern !

Antworten
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

Wird schon seinen Grund haben, warum die kostenlos sind.

Antworten
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!
Hallo und herzlich willkommen bei t3n!

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

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

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige