Jeder der schon Formulare in HTML erstellt hat, wird sich bestimmt schon einmal die Frage gestellt haben, ob es nicht eine Möglichkeit gibt, um den Buttons ein anderes Aussehen zu geben.
Standard Button
Standardmäßig haben die Buttons ein graues langweiliges Äußeres. Je nach Betriebssystem und Browser können diese zwar etwas unterschiedlich aussehen, aber sie könnten dennoch viel individueller aussehen, wenn man nur weiß wie.
HTML Code:
Farbiger Button
Doch wie man leicht erkennen kann, will so ein Button nicht wirklich in das Design der Seite passen. Er sticht förmlich heraus und sieht wie ein Fremdkörper aus. Warum passen wir nicht einfach die Farbe an? Okay!
HTML Code:
CSS Code:
input.farbig {
background-color: #9BCCCA;
}
Button mit einem Ikon
Jetzt passt der Button zwar farblich zur Seite, doch irgendwie ist er immer noch etwas langweilig. Wie wäre es, wenn er ein eigenes Ikon hätte, an dem jeder gleich erkennen kann, wofür der Button zuständig ist! Also schnell ein Ikon zeichnen und los gehts.
HTML Code:
CSS Code:
input.ikon {
background-image: url(ikon.gif);
background-color: #9BCCCA;
background-repeat: no-repeat;
background-position: left center
}
Weitere Button Kombinationen
Okay, das Ikon mag vielleicht ein Schnellschuß sein, aber Ihr müßt zugeben, so einen Button sieht man nicht alle Tage! Und das alles, ohne große Grafiken für die Button laden zu müssen (abgesehen von dem kleinen Ikon). Alles läßt sich problemlos mit CSS lösen.
Wem das noch nicht genug ist, der Button läßt sich natürlich noch ein ganzes Stück weiter verändern!
HTML Code:
CSS Code:
input.rahmen {
border: thin #333333 solid;
background-color: #9BCCCA;
background-image: url(media/ikon.gif);
background-repeat: no-repeat;
background-position: left center
}
input.rahmen2 {
border: thin #333333 dashed;
background-color: #9BCCCA;
background-image: url(media/ikon.gif);
background-repeat: no-repeat;
background-position: left center
}
input.rahmen3 {
border: double;
background-color: #9BCCCA;
background-image: url(media/ikon.gif);
background-repeat: no-repeat;
background-position: left center ;
border-color: #CCCCCC #333333 #333333 #CCCCCC;
border-width: thin medium medium thin
}
input.rahmen4 {
border: medium groove;
background-color: #9BCCCA;
background-image: url(media/ikon.gif);
background-repeat: no-repeat;
background-position: left center ;
border-color: #CCCCCC #333333 #333333 #CCCCCC
}
input.rahmen5 {
border: medium outset;
background-color: #9BCCCA;
background-image: url(media/ikon.gif);
background-repeat: no-repeat;
background-position: left center ;
border-color: #CCCCCC #333333 #333333 #CCCCCC;
}
So, viel Spaß beim Ausprobieren. Es lassen sich noch eine Vielzahl anderer Kombinationen erstellen. Einfach ein wenig rumspielen.
1 thought on “CSS Button Tricks”