Farbigw Buttons?

Hallo,

ist es möglich einem Button eine andere Farbe zu geben? Wenn ja, wie?

Danke, Arno

[Mathias Simmack]

Das ist leicht. ) Mit CSS. Hab´ ich selber schon gemacht. Also:

<pre>
...
&lt;style type="text/css"&gt;
&lt;--
.FormBtn { font-family:Tahoma,Verdana,Helvetica,Sans-serif; font-size:8pt; color:#000000; background-color:#d4d0c8; border-top:#808080 solid thin; border-bottom:#808080 solid thin; border-right:#808080 solid thin; border-left:#808080 solid thin; }
//--&gt;
&lt;/style&gt;
...
&lt;body&gt;
...
&lt;input ... class="FormBtn"&gt;
...
</pre>

Ergebnis ist ein etwas hellgrauer (noch heller als normal ) Button mit dunkelgrauem Rand -- im flachen Stil. Nach dem Muster kannst du auch andere Farben verwenden. Das lässt sich auch für Edit-Felder benutzen, die dann auch diesen schicken "Flat-Look" haben. ;o) Nur Dropdown-Menüs weigern sich beharrlich.

Gruß.
Mathias

Danke :

[Mathias Simmack]

Eine kleine Ergänzung zum Thema "Buttons" sei mir gestattet.
(Ja, ich will auch mal "noch einen draufsetzen" ))

Das folgende funktioniert im IE, im Mozilla (damit wohl auch im Netscape6), nur leider nicht im Opera. (Aber man kann nicht alles haben. ;o) Ergebnis ist ein Button, dessen Rahmen sich ändert, wenn man mit der Maus rübergeht.

<pre>
&lt;style type="text/css"&gt;
&lt;!--
.FormBtn { font-family:Tahoma,Verdana,Helvetica,Sans-serif; font-size:8pt; color:#000000; background-color:#fafaf9; border-top:#808080 1px solid; border-bottom:#808080 1px solid; border-right:#808080 1px solid; border-left:#808080 1px solid; }
.HoverFormBtn { font-family:Tahoma,Verdana,Helvetica,Sans-serif; font-size:8pt; color:#000000; background-color:#fafaf9; border-top:#fcce71 1px solid; border-bottom:#fcce71 1px solid; border-right:#fcce71 1px solid; border-left:#fcce71 1px solid; }
//--&gt;
&lt;/style&gt;

&lt;input type="reset" value=" L&ouml;schen " class="FormBtn" onmouseover="this.className='HoverFormBtn';" onmouseout="this.className='FormBtn';"&gt;&nbsp;&l t;input type="submit" value=" Weiter &gt; " class="FormBtn" onmouseover="this.className='HoverFormBtn';" onmouseout="this.className='FormBtn';"&gt;
</pre>

Was den Opera angeht: generell scheinen farbige Buttons nicht so sein Ding zu sein. Eigentlich schade, denn mit einer solchen Konstruktion kann der Browser nämlich durchaus etwas anfangen:

<pre>
&lt;style type="text/css"&gt;
&lt;!--
.TableStyle { border-top:#000000 2px solid; border-bottom:#000000 2px solid; border-right:#000000 2px solid; border-left:#000000 2px solid; }
//--&gt;
&lt;/style&gt;
&lt;body&gt;
&lt;table border="0" width="500" heigth="100%" align="center" class="TableStyle"&gt;
&nbsp;&nbsp;&lt;tr&gt;&lt;td width="100%" height="100%"&gt;&nbsp;&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
</pre>

In dem Fall zeigt der Opera, wie auch IE/Mozilla/Netscape6 eine Tabelle mit einem 2-Pixel-breiten schwarzen Rand an, was (in meinen Augen ;o) viel besser aussieht als dieser hässliche graue Standardrahmen. Der einzige Browser, der gar nichts davon kann, ist der Netscape4.

Mathias