Basic Pembuatan Tombol 3D dengan CSS

http://blog.kangrian.com

by Rian .N Herdian

HTML

<a href="#link" class="tridi kecil">Kecil</a>
<a href="#link" class="tridi">Standar</a>
<a href="#link" class="tridi besar">Besar</a>
KangRian.com

<!-- Font : -->
<link href='http://fonts.googleapis.com/css?family=Coda' rel='stylesheet' type='text/css'>

CSS

a.tridi {
    color:#f2f2f2;
    background:#555;
    padding:4px 12px;
    border-radius:4px;
    text-decoration:none;
    font-size:100%; /* Ukuran Font */
    font-family: 'Coda', cursive;
    box-shadow:0px 4px 0px #ccc;
}
a:hover.tridi { background:#333;color:#fff; }
a:active.tridi { 
    position:relative;
    bottom:-4px;
    box-shadow:none;
    background:#111;
}
a.kecil { font-size:70%; }
a.besar { font-size:150%; }