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