Przyciski w CSS – dla początkujących !
Tutorial pokazuje jak wykonać proste przyciski w CSS a właściwie menu w CSS. Po najechaniu myszką, przycisk zmieni swoje atrybuty. Sposób prosty lecz efektowny i estetyczny.
Potrzebne nam będą dwa pliki:
- index.html
- style.css
W pliku index.html w sekcji <head></head> podajemy ścieżkę do arkuszu stylów CSS:
<link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8" />
Następnie w <body></body> tworzymy pudełeczko “menu” w którym znajdować będą się nasze przyciski
<div class="menu">
<a href="#">About</a>
<a href="#">Webmasterka</a>
<a href="#">Portfolio</a>
<a href="#">Kontakt</a>
</div>
(a href=”możemy tutaj umieścić link”)
Następnie w arkuszu stylów style.css odwołujemy się do naszych elementów:
@charset "utf-8";
html, body {
text-align:left; /* tekst z lewej strony */
font-family:Verdana,Arial; /* czcionka */
font-size:16px; /* wielkość czcionki */
background-color:#f6f4ee; /* kolor tła naszej strony */
}
* { /* odwołujemy się do całego dokumentu */
margin:0; /* strona przylega do */
padding:0; /* krawędzi przeglądarki */
}
.menu {
background-color:#f5fbfb; /* tło naszego "pudełeczka" */
padding:10px; /* elementy oddalone o 10px od brzegów "pudełeczka" */
float:left;
}
a { /* odwołujemy się do wszystkich selektorów a */
padding: 10px;
margin: 10px; /* odległości między linkami */
background-color: #FFFFFF;
border-style: solid; /* styl obramowania */
outline: none; /* bez obwódki po kliknięciu */
text-decoration:none; /* bez dekoracji tekstu */
color: #666666;
float:left; /* linki są obok siebie */
}
a:link, a:visited{ /* link zwykły i odwiedzony */
border-color: #86ebec; /* kolor obramowania */
}
a:hover{ /* link po najechaniu myszką */
color:#a1db6d;
border-color: #bafeff;
}
Przyciski można zmieniać wg. własnych potrzeb stosując różne wariacje kolorów itp.
w dniu czerwiec 6, 2008 w dniu 7:17 am
Świetny post. Krótko, na temat oraz zrozumiałe. Zaraz chcę zastosować to co przeczytałem w twoim blogu. Dzięki za pomoc, bo nigdzie nie znalazłem tak jasnego wyjaśnienia jak zmienić kolory menu po najechaniu myszką.