CSS3 Tombol 3 Dimensi
HTML
<a class='button3' href='#'>Tombol 3 Dimensi</a>
CSS
.button3 {
cursor:pointer;
margin:10px 0px;
background:#479ECD;
padding:10px 15px;
margin:4px 2px;
font:bold 16px Arial,Sans-Serif;
color:#fff;
text-decoration:none;
outline:none;
text-shadow:0px -1px 0px #297EB9;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
inset 0px -1px 0px rgba(255,255,255,0.3),
0px 3px 0px #297EB9,
0px 5px 8px rgba(0,0,0,0.4);
-moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
inset 0px -1px 0px rgba(255,255,255,0.3),
0px 3px 0px #297EB9,
0px 5px 8px rgba(0,0,0,0.4);
box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
inset 0px -1px 0px rgba(255,255,255,0.3),
0px 3px 0px #297EB9,
0px 5px 8px rgba(0,0,0,0.4);
}
.button3:hover {
-webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4),
inset 0px -1px 0px rgba(255,255,255,0.3),
0px 3px 0px #297EB9,
0px 5px 8px rgba(0,0,0,0.4);
-moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4),
inset 0px -1px 0px rgba(255,255,255,0.3),
0px 3px 0px #297EB9,
0px 5px 8px rgba(0,0,0,0.4);
box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4),
inset 0px -1px 0px rgba(255,255,255,0.3),
0px 3px 0px #297EB9,
0px 5px 8px rgba(0,0,0,0.4);
}
.button3:active {
position:relative;
top:2px;
-webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
inset 0px -1px 0px rgba(255,255,255,0.3),
0px 1px 0px #297EB9,
0px 3px 3px rgba(0,0,0,0.4);
-moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
inset 0px -1px 0px rgba(255,255,255,0.3),
0px 1px 0px #297EB9,
0px 3px 3px rgba(0,0,0,0.4);
box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
inset 0px -1px 0px rgba(255,255,255,0.3),
0px 1px 0px #297EB9,
0px 3px 3px rgba(0,0,0,0.4);
}
Demo
Disederhanakan dari: http://css3exp.com/button
7 Komentar
uki
Cssnya di taruh di mana ?
Maaf newbie...
Taufik Nurrohman
@UqiDi atas
]]></b:skin>
atau</style>
Unknown
ke template > penyesuaian > tingkat lanjut > css :D | cara newbrot :v
Suparyanto
Nice button. Saya coba masukan ke dalam Postingan,tapi buttonnya tidak aktif. Aktifkan hanya saat hover. :'( Ada solusi?
Taufik Nurrohman
@Suparyanto Coba tambahkan
!important
:Suparyanto
@Taufik NurrohmanOK,diralat dulu..
Unknown
asli kalo dah faham jadi betah euy di blog si akang :D