Make The Funky Button with CSS 3

Walaupun tools CSS3 sudah ada dan kita para pengguna tinggal klik edit sana-sini lalu dipakai, tapi tetep saja harus butuh kemauan. Silahkan sobat buat tombol dengan aneka tools disini CSS3 Tools Online for Developing your Skill. Judulnya saja Tools CSS 3 online untuk mengembangkan skill.
Sangkin tidak ada kerjaan, Beben Koben si bloglang anu ganteng kalem tea mencoba membuat satu tombol funky with CSS3 attribute nih sob ;)) Pokoknya keren deh, pas diklik ada efek mendelep kebawah and warnanya berubah saat mouse diarahkan :D Mungkin karena CSS3 masih awam, jadi rada ribet juga kesana kemari guna menyeleraskan style. Heres for demo my friends :)

Prodigy of Head
Gimana, keren kan ;)) Yaaa...paling tidak bisa memacu skill creativity para sobat pelancong yang nyasar kemari :P
Tertarik dengan tombol itu, yuk sambit dah bumbu-bumbunya.

Kode CSS 3

.b-button {
color: #fff;
font-size: 14px;
font-weight: bold;
margin: 0 5px;
padding: 5px 15px;
text-align: center;
background-color: #9C6FF6;
display: -moz-inline-stack;
display: inline-block;
text-decoration: none;
box-shadow: 0 5px 0 #6B27F1;
-moz-box-shadow: 0 5px 0 #6B27F1;
-webkit-box-shadow: 0 5px 0 #6B27F1;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-shadow: rgba(0, 0, 0, .7) 0 2px 0;
-webkit-transition: background-color .5s;
-moz-transition: background-color .5s;
-o-transition: background-color .5s;
transition: background-color .5s;
}
.b-button:hover {
color: #FFFF00;
background-color: #FF0000;
box-shadow: 0 5px 0 #B30000;
-moz-box-shadow: 0 5px 0 #B30000;
-webkit-box-shadow: 0 5px 0 #B30000;
}
.b-button:active {
position: relative;
top: 5px;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}

Pada CSS diatas Beben tidak memasukan variabel width & height! Jika mau diatur lebar and tingginya agan tinggal pake var. width & height ajah...oke :-bd

Kode HTML

Pemakaian kode html itu sob :) tinggal sisipkan atribut class="b-button"<a href="http://your-link-add-here" class="b-button" title="" target="_blank">Lorem Ipsom Nyet</a>

Prodigy of Head

Kode CSS3

.b-demo {
background-color:#09F;
color:#fff;
font:bold 15px Verdana, Tahoma, Arial;
-moz-border-radius:10px;
border-radius:10px;
-moz-box-shadow:0 2px 0 #333, 0 0 1px #333, 0 -1px 0 rgba(255, 255, 255,0.5) inset, 0 1px 0 rgba(0, 0, 0,0.2) inset;
-webkit-box-shadow:0 2px 0 #333, 0 0 1px #333, 0 -1px 0 rgba(255, 255, 255,0.5) inset, 0 1px 0 rgba(0, 0, 0,0.3) inset;
box-shadow:0 2px 0 #333, 0 0 1px #333, 0 -1px 0 rgba(255, 255, 255,0.5) inset, 0 1px 0 rgba(0, 0, 0,0.2) inset;
text-shadow:0 1px 0 rgba(0, 0, 0, 0.5), 0 -1px 0 rgba(0,0,0,0.5);
position:relative;
display:inline-block;
margin:0 10px;
padding:10px 20px;
}

.b-demo:hover {
background-color:#a20000;
}

.b-demo:active {
background:#555;
-moz-box-shadow:0 0 4px #000 inset;
-webkit-box-shadow:0 0 4px #000 inset;
box-shadow:0 0 4px #000 inset;
top:2px;
}

Kode Html

<a class="b-demo" href="/" title="Prodigy of Head">Prodigy of Head</a>

Kode CSS3

a.redTombol{
display: inline-block;
width:50px;
height: 50px;
background-color:red;
text-transform: uppercase;
position:relative;
padding:15px;
line-height:50px;
text-align:center;
text-decoration: none !important;
font-weight:bold;
color:#fff;
font-size:14px;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
bottom:0;
margin:0;
transition:0.15s linear;
-moz-transition:0.15s linear;
-webkit-transition:0.15s linear;
box-shadow:0 5px 0 darkred,0 0 10px rgba(0,0,0,0.3) inset, 8px 10px 4px rgba(0,0,0,0.4);
-moz-box-shadow:0 5px 0 darkred,0 0 10px rgba(0,0,0,0.3) inset, 8px 10px 4px rgba(0,0,0,0.4);
-webkit-box-shadow:0 5px 0 darkred,0 0 10px rgba(0,0,0,0.3) inset, 8px 10px 4px rgba(0,0,0,0.4);
border-radius:50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
}

a.redTombol:active{
bottom:-5px;
box-shadow:0 0 0 darkred,0 0 20px rgba(0,0,0,0.5) inset;
-moz-box-shadow:0 0 0 darkred,0 0 20px rgba(0,0,0,0.5) inset;
-webkit-box-shadow:0 0 0 darkred,0 0 20px rgba(0,0,0,0.5) inset;
}

Kode HTML

<a href="" class="redTombol" title="">Push!</a>DEMOPush!Semoga bermanfaat :)
This is may be intereset:

• http://www.webdesignerdepot.com/2011/07/css-buttons-tutorials-and-examples/

Bye bye \m/