foto html - css     . Allerlei - Button met kleur

Omschrijving   Voorbeeld

Methode 1:

Dit maken we heel eenvoudig in een stylesheet

Verander het volgende bij de button:

<input type="button" name="Button" value="drukknopje">

naar:

<input type="button" name="Button" value="drukknopje" class="button">

In de stylesheet zet je het volgende:

.button {FONT-FAMILY:Arial, Helvetica, sans-serif; FONT-SIZE:13px; COLOR:#000000; FONT-WEIGHT:normal;
BACKGROUND-COLOR:#F5F5F0; BORDER:1px solid #000000;}

Je ziet, je kan veel meer met een zelf gemaakte button. Je kan de lettertypes aanpassen en eigen kleur geven, achtergrondkleur en de border.

Methode 2:
Dit is eigenlijk geen button maar een link, maar wel verdacht veel op een button lijkt vandaar ik hem hier ook neer zet.

  Methode 1:
Een gekleurde button staat tot veel mooier en professioneler dan zo'n standaard button

Methode 2:

drukknopje

css

a.mainlevel:visited {
border:1px solid #000000;
display: block;
text-align: center ;
text-decoration: none;
color: #FC6401;
float: left;
font-size: 11px;
font-weight: bold;
padding: 4px;
color: #ff6600;
background-color:#E6E6E6;}
a.mainlevel:hover {color: #000000; border:1px solid #cccccc;}

Tussen de bodytags

<a href="#" class="mainlevel">drukknopje</a>

end
terug
home