Ovládněte tvorbu webu!
S námi to zvládne opravdu každý.
Jednoduchá CSS tlačítka
Toto jsou celkem jednoduchá a hezká css tlačítka, které fungují téměř všude (testováno na nejpoužívanějších prohlížečích).
Efekt je celkem triviální u a:hover se nastaví rámeček (border) na černou barvu (black) u normálního odkazu je ta barva stříbrná (silver) takže po najetí myší na odkaz se změní pouze barva rámečku ze silver na black.
Samozřejmě lze změnit více vlastností třeba barvu textu color atd...
Co určitě neměnit:
- Vlastnost font-weight (tloušťka písma).
- Vlastnost font-size (velikost písma).
- A další věci při kterých se stránka rozpadá.
Tyto vlastnosti si můžete změnit, ale určitě to nepublikujte opravdu nemám rád když nejedu myší na odkaz ten se zvětší a všechny texty poskočí (nebo se to někdy taky celé 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>
Upravujeme rámečky (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. A to už je 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