1 März 2013 13:43

github-ähnliche Buttons mit CSS3

Bei der Arbeit an meinem Blogdesign war ich dabei, die Buttons neu zu gestalten. Erste Versuche waren recht vielversprechend, allerdings kamen dann immer mehr Sonderfälle hinzu. Außerdem ist es gar nicht so leicht, die Buttons browserübergreifend so zu gestalten, wie ich es mochte.

Auf der Suche nach Tipps bin ich schließlich auf die CSS3 GitHub Buttons von necolas gestoßen. Sie entsprachen ungefähr meinen Vorstellungen, wiesen aber noch einige Bugs auf.

Mein Fork

Im ursprünglichen Repository hat sich schon seit einem Jahr nichts mehr getan und es gibt Dutzende Forks mit der ein oder anderen Modifikation. Schnell hatte ich mir einen eigenen Fork erstellt, mir diverse Patches aus anderen Forks zusammengesucht und mit eigenen ergänzt.

Einige Ergänzungen sind zum Beispiel ein Button für positive Aktionen, Verläufe für IE8, schmale Buttons sowie etliche Bugfixes.

.slim-group für Text-Tools .icon-only für Artikelbearbeitung

Weitere Beispiele befinden sich im Repository in der Datei index.html.

Kommentare

wieschoo, 29.03.2013 23:44
hättest ja wenigstens mal ein paar Beispiele als LiveDemo einbauen können.
Sehen gut aus. Bin jetzt nur zu faul mir den Quelltext zu kopieren.
SammysHP, 30.03.2013 07:46
http://www.sammyshp.de/misc/gh-buttons/

Kann aber sein, dass das nicht die aktuellste Version ist.
SammysHP, 30.03.2013 11:13
Habe das Beispiel gerade aktualisiert und außerdem ein paar Buttons im Post eingefügt.
Heiko, 21.06.2013 10:50
Wie wäre es mit einem Twitter Bootstrap Github-Theme? Das wäre doch mal klasse!
SammysHP, 21.06.2013 15:00
@Heiko

Du meinst nur mit den Buttons? Ich habe noch nie mit Bootstrap gearbeitet. Das hier ist ja nur eine CSS-Datei und HTML mit den richtigen CSS-Klassen. Das sollte leicht zu übernehmen sein.

Wenn du möchtest, kannst du mein Repository forken und es entsprechend umschreiben.
Powered by BetaBlog
Login | RSS Beiträge RSS Kommentare Impressum