© Henrik Jensen - ViewSource.dk
Dansih Version   English Version


 CSS Knapper
Skrevet af: Henrik Jensen / 02-12-2001

Læst 16667 gange
NÅr man går i gang med sin hjemmeside, opdager man hurtig at det er vigtigt med en nem navigering. På typiske hjemmesider finder man GIF knapper som fungerer som menu, men de gør siden tungere at loade. Derfor er det smart at lave CSS knapper som faktisk er rent kode - og intet med grafik at gøre.

Lad os se på et eksempel

<STYLE TYPE="text/css">
<!--
#mybutton
    {
    border-style: inset;
    border-color: #ff6633;
    background-color: #CC3300;
    text-decoration: none;
    width: 80px;
    text-align: center;
    }

A.buttontext
    {
    color: white;
    text-decoration: none;
    font: bold 12pt Verdana;
    cursor: hand;
    }

.buttonover
    {
    color: 8080FF;
    text-decoration: none;
    font: bold 12pt Verdana;
    cursor: hand;
    }
-->

</STYLE>

<A HREF="http://www.viewsource.dk/" CLASS="buttontext"
onMouseOver="this.className='buttonover';"
onMouseOut="this.className='buttontext';">

<DIV ID="mybutton">
Viewsource
</DIV>
</A>

Det giver følgende Knap

Viewsource


Vil du lave en hel menu med knapper, gentager du bare dine Links således

<A HREF="http://www.viewsource.dk/" CLASS="buttontext" onMouseOver="this.className='buttonover';" onMouseOut="this.className='buttontext';">
<DIV ID="mybutton">
Viewsource
</DIV></A>


<A HREF="http://www.viewsource.dk/" CLASS="buttontext" onMouseOver="this.className='buttonover';" onMouseOut="this.className='buttontext';">
<DIV ID="mybutton">
Viewsource
</DIV></A>


Her Ser i MIN :-) CSS-Knap Menu

FunChart
Active ISP
Kilroy
Tradedoubler


God Kodning :-)