Demonstracija:

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

<style>

/*mygtukų juosta*/

#mygtukai {

display:block;

width: 550; /*plotis*/

}
/*mygtukas ramybės būsenoje*/

#mygtukai a {

width: 120px; /*plotis*/

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

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

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

border: 1px solid #999; /*kairiojo rėmelio spalva*/

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

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

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

}

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

#mygtukai a:hover {

background-color: #FFF; /*fono spalva*/

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

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

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

border: 1px solid #993300; /*kairiojo rėmelio spalva*/

}

</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>