webmatze.de

Profi Tipps für einen erfolgreichen Internetauftritt

CSS Button Tricks

| 1 Kommentar

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:

  1.  
  2. <input type="submit" name="Button1" value="Text" />
  3.  

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:

  1.  
  2. <input type="submit" name="Button1" value="Text" class="farbig" />
  3.  

CSS Code:

  1.  
  2. input.farbig {
  3. background-color: #9BCCCA;
  4. }
  5.  

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:

  1.  
  2. <input type="submit" name="Button1" value="Text" class="ikon" />
  3.  

CSS Code:

  1.  
  2. input.ikon {
  3. background-image: url(ikon.gif);
  4. background-color: #9BCCCA;
  5. background-repeat: no-repeat;
  6. background-position: left center
  7. }
  8.  

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:

  1.  
  2. <input type="submit" name="Button1" value="Text" class="rahmenX" />
  3.  

CSS Code:

  1.  
  2. input.rahmen {
  3. border: thin #333333 solid;
  4. background-color: #9BCCCA;
  5. background-image: url(media/ikon.gif);
  6. background-repeat: no-repeat;
  7. background-position: left center
  8. }
  9.  
  10. input.rahmen2 {
  11. border: thin #333333 dashed;
  12. background-color: #9BCCCA;
  13. background-image: url(media/ikon.gif);
  14. background-repeat: no-repeat;
  15. background-position: left center
  16. }
  17.  
  18. input.rahmen3 {
  19. border: double;
  20. background-color: #9BCCCA;
  21. background-image: url(media/ikon.gif);
  22. background-repeat: no-repeat;
  23. background-position: left center ;
  24. border-color: #CCCCCC #333333 #333333 #CCCCCC;
  25. border-width: thin medium medium thin
  26. }
  27.  
  28. input.rahmen4 {
  29. border: medium groove;
  30. background-color: #9BCCCA;
  31. background-image: url(media/ikon.gif);
  32. background-repeat: no-repeat;
  33. background-position: left center ;
  34. border-color: #CCCCCC #333333 #333333 #CCCCCC
  35. }
  36.  
  37. input.rahmen5 {
  38. border: medium outset;
  39. background-color: #9BCCCA;
  40. background-image: url(media/ikon.gif);
  41. background-repeat: no-repeat;
  42. background-position: left center ;
  43. border-color: #CCCCCC #333333 #333333 #CCCCCC;
  44. }
  45.  

So, viel Spaß beim Ausprobieren. Es lassen sich noch eine Vielzahl anderer Kombinationen erstellen. Einfach ein wenig rumspielen.

Diese Artikel könnten dich auch interessieren: