Demonstracija:

1. Įkeliam ir pakoreguojam pagal savo poreikius žemiau pateiktą css kodą į
stilių dokumentą:

<style>

/*mygtukas ramybės būsenoje*/

#mygtukai a {

display:block;

width: 120px; /*plotis*/

padding: 5px; /*atstumas nuo kraštų, mygtuko viduje*/

margin: 2px 0px 2px 0px; /*atstumas nuo kraštų, mygtuko išorėje*/

text-decoration: none; /*šriftas nepabrauktas*/

background-color: #33CC00; /*Fono spalva*/

border-left: 8px solid #339900; /*Kairiojo rėmelio spalva*/

font: 11px verdana; /*šriftas*/

font-weight: bold; /*šrifto storis*/

color:#FFF; /*šrifto spalva*/

}

/*mygtukas užvedus ant jo pelės žymeklį*/

#mygtukai a:hover {

background-color: #339900; /*Fono spalva*/

border-left: 8px solid #33CC00; /*Kairiojo rėmelio spalva*/

padding: 5px; /*atstumas nuo kraštų, mygtuko viduje*/

margin: 2px 0px 2px 0px; /*atstumas nuo kraštų, mygtuko išorėje*/

}

</style>

2. Vietoje, kurioje turi būti mygtukai įrašome ir pakoreguojame:

<div id="mygtukai">

<a href="#">Ifreal.com</a>

<a href="#">Naujienos</a>

<a href="#">Pamokos</a>

<a href="#">Kontaktai</a>

</div>