Webmasterka


Przyciski w CSS – dla początkujących !

Posted in CSS - autor: ToMas w dniu Styczeń 1, 2008
Tags: , , , , , , , ,

przyciski

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.

Podgląd

Jedna odpowiedź to 'Przyciski w CSS – dla początkujących !'

Subscribe to comments with RSS lub TrackBack to 'Przyciski w CSS – dla początkujących !'.

  1. janusz said,

    Ś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ą.


Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Log Out / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Log Out / Zmień )

Facebook photo

Komentujesz korzystając z konta Facebook. Log Out / Zmień )

Google+ photo

Komentujesz korzystając z konta Google+. Log Out / Zmień )

Connecting to %s


%d bloggers like this: