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    

CSS3 linkgomb (LinkButton) készítése



Csupán CSS3 stílusdeklarációk felhasználásával is készíthetünk egy linkből nyomógombot.

A példában belső és a külső árnyék segítségével jelezzük a nyomógomb állapotát.

1. Példa:

Forráskód


<style>
 a {display: block; background-color:#ffcc00; 
    height:40px; width:159px; 
    text-align:center; padding: 10px; color: #006600; 
    font: bold 26px 'Kaushan Script', cursive; 
    text-decoration:none; letter-spacing:2px; 
    text-shadow: -2px -2px 10px #ffffff;
  -webkit-border-radius: 10px; 
     -moz-border-radius: 10px; 
      -ms-border-radius: 10px; 
       -o-border-radius: 10px; 
          border-radius: 10px;  }
 a:link, a:visited { background-color:#dddd00; 
     box-shadow: 5px 5px 5px 0px #444444, 
                 0px 28px 11px 0px #ffff00 inset; }
 a:hover { background-color:#ffee00;}   
 a:active { background-color:#ffee00; padding-top: 12px;
     box-shadow: 1px 1px 5px 0px #444444, 
                 0px 28px 11px 0px #ffff00 inset; }   
</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_hatterszinnel_01.html