Tvorba webu krok za krokem
od HTML až po SEO a webhosting
Jednoduchá CSS tlačítka
Jedná se o jednoduchá a hezká CSS tlačítka, která fungují téměř všude (testováno v nejpoužívanějších prohlížečích).
Efekt je celkem triviální: u a:hover se nastaví černý rámeček (border), zatímco u normálního odkazu je rámeček stříbrný (silver). Po přejetí myší přes odkaz se tedy změní pouze barva rámečku ze stříbrné na černou.
Samozřejmě lze změnit i další vlastnosti, například barvu textu (color).
Co určitě neměnit:
- Vlastnost font-weight (tloušťka písma).
- Vlastnost font-size (velikost písma).
- a další vlastnosti, při jejichž změně se stránka rozpadá.
Tyto vlastnosti si samozřejmě můžete změnit, ale takovou úpravu raději nepublikujte. Opravdu nemám rád, když se po přejetí myší přes odkaz odkaz zvětší a všechny texty poskočí (nebo se celé rozvržení rozpadne).
Zdrojový kód
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Jednoduchá CSS tlačítka</TITLE>
<style type="text/css">
a.tlacitko{
border-bottom : 1px solid Silver;
border-top : 1px solid Silver;
border-left : 1px solid Silver;
border-right : 1px solid Silver;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight : bolder;
font-size : 60%;
padding : 1px 5px 1px 5px;
background-color : #FFA500;
color : White;
text-decoration : none;
}
a.tlacitko:hover{
border-bottom : 1px solid Black;
border-top : 1px solid Black;
border-left : 1px solid Black;
border-right : 1px solid Black;
}
</style>
</HEAD>
<BODY>
<a href="../../" class="tlacitko">Tvorba Webu</a>
</BODY>
</HTML>
Úprava rámečků (efekt prohnutí CSS tlačítka)
Ještě lépe to vypadá, když si trochu pohrajeme s rámečky.
Nejprve u a nastavíme border-right a border-bottom na Black, border-left a
border-top na Silver a u aktivního odkazu (a:hover) přesně naopak. Tím vznikne efekt opravdového tlačítka.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Jednoduchá CSS tlačítka</TITLE>
<style type="text/css">
a.tlacitko{
border-bottom : 1px solid black;
border-top : 1px solid Silver;
border-left : 1px solid Silver;
border-right : 1px solid black;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight : bolder;
font-size : 60%;
padding : 1px 5px 1px 5px;
background-color : #FFA500;
color : White;
text-decoration : none;
}
a.tlacitko:hover{
border-bottom : 1px solid silver;
border-top : 1px solid Black;
border-left : 1px solid Black;
border-right : 1px solid silver;
}
</style>
</HEAD>
<BODY>
<a href="../" class="tlacitko">Tvorba
CSS</a>
</BODY>
</HTML>
Reklama
Copyright (c) 2004 Tvorba webu – Kontakt – Mapa webu