Button mit CSS erstellen / gestalten

Wie bereits gesagt ist praktisch jedes Element, das eine Aktion auslöst ein Button. Das betrifft also nicht nur Grafiken, sondern genauso <div>-Tags, Tabbellenteil oder Textelemente. Alles kann genutzt werden und formatiert werden. Trotz allem bleibt das Bild eines Standardbuttons immer vor unserem geistigen Auge.

Wie man das so formatiert, zeige ich hier.

Grundsätzlich benutzt man dazu zwei Dinge. Zum ersten eine CSS-Style Definition und ein entsprechendes HTML-Element.

Eine komplette CSS-Definition für einen Button sieht so aus:

<style type="text/css">

.button {

/*-- Definition der Randstärken, welche den Schatteneffekt bewirken ------*/

border-top-width:1px;

border-right-width:4px;

border-bottom-width:4px;

border-left-width:1px;

/*-- Definition der Linienart des Randes (durchgehend, gestrichelt, gepunktet),  ------*/

border-top-style:solid;

border-right-style:solid;

border-bottom-style:solid;

border-left-style:solid;

/*--- Definition der Randfarben ------>*/

border-top-color:#0a0a0a;

border-right-color:#0a0a0a;

border-bottom-color:#0a0a0a;

border-left-color:#0a0a0a;

/*--- Definition des Radius der Ecken -----*/

border-top-left-radius:11px;

border-top-left-radius:11px;

-moz-border-radius-topleft:11px;

border-top-right-radius:11px;

-moz-border-radius-topright:11px;

border-bottom-right-radius:11px;

-moz-border-radius-bottomright:11px;

border-bottom-left-radius:11px;

-moz-border-radius-bottomleft:11px;

/*--- Definition des Farbverlaufs  ------*/

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d7d7d7',endColorstr='#6e6e6e',GradientType=0);

background-image:-moz-linear-gradient(top,#d7d7d7 0,#6e6e6e 100%);

background-image:-webkit-linear-gradient(top,#d7d7d7 0,#6e6e6e 100%);

background-image:-ms-linear-gradient(top,#d7d7d7 0,#6e6e6e 100%);

background-image:-o-linear-gradient(top,#d7d7d7 0,#6e6e6e 100%);

background-image:linear-gradient(top,#d7d7d7 0,#6e6e6e 100%);

/*-- Definition der Hntergundfarbe falls kein Verlauf möglich ist ------*/

background-color:#d7d7d7;

background-repeat:repeat-x;

/*--- Definition des Innenabstands zum Text------*/

padding-top:10px;

padding-right:10px;

padding-bottom:2px;

padding-left:10px;

/*--- Definition der Textgestaltung ------*/

font-family:Helvetica,sans-serif;

font-size:12px;

font-weight:normal;

font-style:normal;

text-decoration:none;

text-shadow:none;

text-transform:uppercase;

color:#000;

/* Definition der Textausrichtung und der Breite der Elemente mit dieser Definition ------*/

text-align:left;

width:150px}

</style>

Zusätzlich gibt es jetzt ein HTML-Element dem diese class zugewiesen wird. Je nach Element ist die Wirkung etwas anders.

Und schon sieht das ganze so aus:

Wie man sieht, muss man trotz aller Formatierung auch auf die verwendeten TAGS Rücksicht nehmen. Ein <Span> lässt sich nicht direkt in Höhe und Breite definieren, aber man kann durch im Tag definierte Style-Anweisung das padding rechts erhöhen und damit den Button verbreitern. Die Höhe wurde schon per class angepasst, weil auch dort das padding-top wirkt. (ist daher ungeeignet, weil man das für jeden Eintrag einzeln machen muss um immer die gleiche Breite zu haben)

Im <table> Beispiel sieht es etwas quadratisch aus - aber nur im Firefox und nicht im IE11, weil hier offensichtlich die übergeordneten CSS-Anweisungen des Templates mit denen von "button"  im Widerspruch stehen und man diese ändern müsste, bzw. im <table>-Tag nachbessern müsste. Und im <li> Beispiel ist noch der Punkt vorne zu sehen

Anpassung:

<span class="button" style="padding-right:100px>       rechter Abstand vom Text zum Innenrand auf 100px

<li class="button" style=" list-style-type:none">           Aufzählungszeichen ausgeschaltet

<table style="border-collapse: separate">                    Das Ausblenden der Ränder ausgeschaltet

So einfach ist das eigentlich. jetzt muss man das nur noch richtig einbauen.

Kleine Anmerkung: Bei der Definition der Ecken und des Farbverlaufs sieht man verschiedene Einträge, die sich sehr ähneln. Hier wird den verschiedenen alten Versionen der einzelnen Browser Genüge getan, weil ja jeder immer sein eigenes Süppchen kochen muss. Zum Glück gibt es jetzt den CSS3-Standard, aber solange noch viele mit alten Browsern surfen, muss es eben noch auf diese Tour gemacht werden. Einer der Gründe warum das alles nur bedingt Spass macht und warum man eben nicht einfach mal so auf die Schnelle eine Webseite zusammenprogrammiert. Aber in ein paar Jahren wird es dann einfacher und übersichtlicher. (hofft man)