Cara memasang Slide Button Sederhana Di Halaman Blog

Cara memasang Slide Button Sederhana Di Halaman Blog - Button yang akan kita bahas kali ini adalah button yang sangat sederhana sekali sehingga tidak akan memberatkan loading blog. Dalam penambahan button kali ini kita hanya perlu menambahkan kode CSS saja pada template blog. Meskipun terbilang sederhana tapi button tetap keren karena menggunakan efek "hover" dan "inset". Untuk demonya lihat pada tombol di bawah ini.

Tutorial Blog

Berikut Cara memasang Slide Button Sederhana Di Halaman Blog tersebut :

1. Simpan CSS di bawah ini di atas </style>

#wrap {margin:20px auto;text-align:center;}
a.btn {display:inline-block;position:relative;font-family:'Open 
Sans',sans-serif;text-decoration:none;font-weight:700;background:#30abd5;letter-spacing:.5px;padding:10px
 20px;margin:10px;color:#fff;box-shadow:inset 0 0 0 
#22313F;font-size:16px;text-transform:uppercase;border-radius:3px;transition:all
 0.3s ease-out;}

a.btn:hover {background:#30abd5;color:#fff;box-shadow:inset 0px -50px 0px #22313F;}

a.btn:active {color:#05555e;box-shadow:inset 0px -50px 0px #f5f7fa;}

a.btn.warn {background:#f5f7fa;color:#05555e;box-shadow:inset 0 0 0 #30abd5;}

a.btn.warn:hover {background:#f5f7fa;color:#fff;box-shadow:inset 0px -50px 0px #30abd5;}

a.btn.warn:active {color:#fff;box-shadow:inset 0px -50px 0px #30abd5;} 0px -50px 0px #30abd5;} 

2. Lalu gunakan markup dibawah ini pada halaman dimana button tersebut akan di pasang. Misalkan saja pada halaman posting. Maka masukan pada mode HTML (bukan Compose).

<div id="wrap">

<a class="btn" href="#">Button</a></div>

<div id="wrap">

<a class="btn warn" href="#">Button</a></div> 

3. Simpan dan lihat hasilnya.

Demikianlah tutorial blog kali ini. semoga bisa bermanfaat.