HTML5 + CSS3 logó
  WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

Linkgomb háttérképekkel



Az a:link és a:visited álelem kijelölőhöz egy közös, plusz az a:hover és az a:active álelem kijelölőkhöz egy-egy külön háttérképet rendelve egyszerűen készíthetünk linkből nyomógombot.

A háttérkép készítésére bármely képszerkesztő program alkalmas. Mindenki kipróbálhatja kreativitását.

A példában használt stílusdeklarációk a tananyag korábbi fejezeteiben megtalálhatók.

1. Példa:

Forráskód



<style>
a {background: url (zold_btn_1.png); 
    height:33px; width:159px; 
    text-align:center; padding-top: 10px;  
    font: 18px 'Kaushan Script', cursive; 
    text-decoration:none; letter-spacing:2px; 
    text-shadow: -1px -1px 2px #00ff00;
    display: block; color: #ffffff;}
a:link, a:visited 
   { background: url("zold_btn_1.png"); }
a:hover { background: url(zold_btn_1a.png);}
a:active { background: url(zold_btn_2a.png);}
</style>     
...
<body>    
  <a href="#">Tovább</a>
</body>
 

Eredmény*


* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css_link_gomb_hatterkeppel_01.html