PAGE online

Button-Generatoren mit Code-Snippets

Wir zeigen eine Auswahl von nützlichen Button-Generatoren.

Mit Online-Button-Generatoren lassen sich Buttons ruckzuck selbst erstellen. Die meisten von ihnen liefern auch gleich die Code-Snippets in HTML und CSS mit. Das ist gerade bei der Erstellung von Prototypen sinnvoll, denn so braucht man nicht extra den Developer bemühen. Hier finden Sie eine Auswahl dieser nützlichen Button-Generatoren – eine Ergänzung zum Artikel in PAGE 09.2018 »Online-Buttons gestalten«.

Bootstrap-Button-Generator
Der Bootstrap-Button-Generator ist super einfach zu bedienen. Neben sechs Buttonfarben und vier Größen, bringt er auch eine Menge Icons mit, die man rechts oder links vom Button-Text positionieren kann. Für das Ergebnis zeigt er den HTML-Code an, den man sich kopieren kann.
https://bootsnipp.com/buttons#

CSS Button Creator
Der CSS Button Creator vom Kanadier Jordan Harding ist ein rundherum überzeugendes Tool. Neben den üblichen Einstellungen wie Button-Typ, -Farbe, -Größe et cetera, lassen sich hier auch Details wie Text- und Box-Schatten, Hover-Funktionen. Den Code-Snippet in HTML gibt´s auch dazu.
http://cssbuttoncreator.com

HTML Code Generator
Der HTML-Code-Generator generiert online kostenlos HTML- CSS- und JavaScript-Code und damit auch CSS-Buttons. Die Online-Plattform richtet sich zwar in erster Linie an Anfänger, kann beim Prototyping aber auch für Webprofis ein nützliches Tool sein. Den Code darf man frei verwenden und an eigene Bedürfnisse anpassen.
https://www.html-code-generator.com/css-button-generator.php

Tutorial Republic
Auch auf dem Online-Portal »Tutorial Republic« gibt es einen Bootstrap-Button-Generator, der einfach zu bedienen ist und normale Button gut funktioniert. Tutorial Republic wurde entwickelt, um Einsteigern zu helfen, die Web-Entwicklungstechnologien zu erlernen, um das know-how allgemein zugänglich zu machen.
https://www.tutorialrepublic.com/twitter-bootstrap-button-generator.php#

W3school
Das Ziel, Web-Technologien allgemein zugänglich zu machen, verfolgt auch die W3-School des W3C-Konsortiums. Button-Generatoren haben natürlich auch ihre Limits und das Spektrum an Gestaltungsmöglichkeiten wir größer, wenn man selbst programmieren kann. Dieses Wissen kann hier jeder in Online-Tutorials erwerben, um Buttons in CSS selbst zu entwickeln.
https://www.w3schools.com/howto/howto_css_alert_buttons.asp

Loading.io
Ausschließlich Lade-Icons in den unterschiedlichsten Formen, die beispielsweise nach dem Klick auf einen Download-Button dem User Feedback signalisieren, findet man auf der Plattform des taiwanesischen Anbieters Loading.io.
https://loading.io

 

[5361]
Produkt: Download PAGE - Goldstandards im UX Design - kostenlos
Download PAGE - Goldstandards im UX Design - kostenlos
Best-Practices und Beispiele im User Experience Design und Interface Design

Kommentare zu diesem Artikel

  1. Es freut mich sehr, dass ich helfen konnte 🙂

  2. Alle oben aufgeführten Tools sind sehr hilfreich für mich. Danke für deinen Beitrag !!

Schreibe einen Kommentar

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

Das könnte dich auch interessieren