CSS Button

Halo sobat blogger,Dipagi ini saya mau share CSS Button yang sangat keren nih.

Kenapa dinamakan CSS Button? Ya sebab button ini hanya memakai css dan didesign dengan simple.

Nah untuk itu diantara kalian jika ingin memakainya sebagai tombol download ikuti cara berikut ini

Tutorial:

1.Login ke blogger

2.Masuk ketemplate-Edit HTML

3.Cari code ini ]]></b:skin> , Dan pastekan css tepat dibawahnya

<style type='text/css'>
button{color:white; padding:10px 20px; border:0; overflow:hidden; font-size:18px; border-radius:3px; position:relative}
button:after{content:''; position:absolute; height:100%; width:100%; left:0; top:0; background:rgba(0,0,0,.4); -webkit-transition:all .3s ease-out; -moz-transition:all .3s ease-out; -o-transition:all .3s ease-out; -ms-transition:all .3s ease-out; transition:all .3s ease-out}
.green{background:#2ecc71}
.blue{background:#3498db}
.red{background:#e74c3c}
.yellow{background:#f1c40f}
button[data-direction="down"]:hover:after{-webkit-transform:translate(0,100%); -moz-transform:translate(0,100%); -o-transform:translate(0,100%); -ms-transform:translate(0,100%); transform:translate(0,100%);  background:rgba(0,0,0,0)}
button[data-direction="up"]:hover:after{-webkit-transform:translate(0,-100%); -moz-transform:translate(0,-100%); -o-transform:translate(0,-100%); -ms-transform:translate(0,-100%); transform:translate(0,-100%);  background:rgba(0,0,0,0)}
button[data-direction="right"]:hover:after{-webkit-transform:translate(100%,0); -moz-transform:translate(100%,0); -o-transform:translate(100%,0); -ms-transform:translate(100%,0); transform:translate(100%,0);  background:rgba(0,0,0,0)}
button[data-direction="left"]:hover:after{-webkit-transform:translate(-100%,0); -moz-transform:translate(-100%,0); -o-transform:translate(-100%,0); -ms-transform:translate(-100%,0); transform:translate(-100%,0);  background:rgba(0,0,0,0)}
</style>

4.Klik simpan,dan untuk memanggilnya silahkan lihat tombol berikut ini

1.Green Button:

<button class="green" data-direction="down">CLICK ME!</button>

2.Red Button:

<button class="red" data-direction="up">CLICK ME!</button>

3.Blue Button:

<button class="blue" data-direction="right">CLICK ME!</button>

4.Yellow Button:

<button class="yellow" data-direction="left">CLICK ME!</button>

Nah Kalian Tinggal memilih salah satu dari tombol diatas
Ets,Sebelum kalian memilih.Ada baiknya kalian lihat demonya terlebih dahulu

Demo

Share

FacebookGoogle+Twitter Digg