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:

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>

zobrazit výsledek

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>

zobrazit výsledek

Reklama

Webhosting C4



Copyright (c) 2004 Tvorba Webu - Kontakt - mapa webu - RSS