7 Tombol Dengan Efek Shadow Dan Glow Transisi


Cara Membuat 7 Tombol Dengan Efek Shadow Dan Glow Transisi. Terkadang dari sebuah tombol pada halaman postingan kita bisa membuat pengunjung menjadi terkesan dan ingin juga memasangnya di blog mereka, sebab tombol-tombol tersebut memiliki daya tarik tertentu baik dari segi tampilan maupun warnanya dan kali ini saya kan membagikan sebuah tutorial cara membuat tombol di halaman posting blog dengan efek Background Transisi. Lihat juga tutorial saya sebelumnya 17 Tombol Dengan Efek Border Transisi.
Tombol Dengan Efek Shadow Dan Glow Transisi  ini secara default bagi yang menggunakan flatform blogger tidak tersedia, nah jika sobat ingin membuat tampilan tombol pada blog sobat menjadi "lebih indah atraktif", saya ada solusinya sob...
7 Tombol Dengan Efek Shadow Dan Glow Transisi
7 Tombol Dengan Efek Shadow Dan Glow Transisi 

Simak langkah-langkahnya dibawah ini:

Catatan: Backup dulu Templatenya sebelum memulai semua langkah-langkah ini !

Cara Memasang 7 Tombol Dengan Efek Shadow Dan Glow Transisi 

Langkah Ke-1: Masuk ke menu Template>>Edit HTMLTambahkan Kode Css berikut sebelum kode </head> , jika sudah ada abaikan saja sob...

<link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

Langkah Ke-2: Tambahkan  kode css  dibawah ini sebelum kode </head> silahkan diedit untuk warna dan ukurannya pada kode .btn lalu Simpan Template sobat. Pilihan Warna

<link href="//cdn.rawgit.com/antoncabon/css/master/Shadow-transisi.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
.kotak {margin:20px auto;text-align:center;}
.btn{display:inline-block;position:relative;font-family:'Open Sans',Helvetica,sans-serif;text-decoration:none;font-weight:700;background:#333;padding:9px 28px;margin:5px 5px;border-radius:3px;opacity:1;border:0;text-transform:uppercase;transition:all .3s ease-out;}
</style> 

Langkah Ke-3:  Tambahkan kode html dibawah ini  pada halaman postingan sobat posisi HTML mode bukan Compose. Pilih salah satu saja sob, ga perlu dipasang semua.

<div class="kotak">
<a href="#" class="btn hvr-shadow">Shadow</a>
<a href="#" class="btn hvr-grow-shadow">Grow Shadow</a>
<a href="#" class="btn hvr-float-shadow">Float Shadow</a>
<a href="#" class="btn hvr-glow">Glow</a>
<a href="#" class="btn hvr-shadow-radial">Shadow Radial</a>
<a href="#" class="btn hvr-box-shadow-outset">Box Shadow Outset</a>
<a href="#" class="btn hvr-box-shadow-inset">Box Shadow Inset</a>
</div>
Langkah Ke-3: Silahkan diganti nama dari tombol tersebut.



Untuk pilihan warna silahkan sobat cek disini 
SELESAI ! Jika ada kendala silahkan tanyakan pada kolom komentar dan selamat mencoba.


Previous
Next Post »

9 komentar

Click here for komentar
Mangs Aduls
admin
14 Agustus 2015 23.22 ×

bisa di cobain ini kang. sangat manfaat. ga banyak juga kode- kodenya

Reply
avatar
Antonius SP
admin
14 Agustus 2015 23.27 ×

iya mangs adul, bisa juga mangs adul pecah codenya, jadi ambil saja yang perlu dang ingin dipake, buka link ini href="//cdn.rawgit.com/antoncabon/css/master/Shadow-transisi.css ambil salah satu saja css yg perlu mang...

Reply
avatar
14 Agustus 2015 23.58 ×

Wah cantik dan menarik ya mas hasilnya :D

Reply
avatar
Mangs Aduls
admin
15 Agustus 2015 00.36 ×

asih nyobain yang kontak kang

Reply
avatar
Antonius SP
admin
15 Agustus 2015 01.04 ×

iya mas... hehehehehe :D

Reply
avatar
15 Agustus 2015 01.59 ×

:-bd :-bd :-bd :-bd :-bd

Reply
avatar
15 Agustus 2015 03.10 ×

bagus bagus banget nih tombol nya, kira2 bisa dicoba nggak ya untuk blog saya :)

Reply
avatar
Antonius SP
admin
15 Agustus 2015 03.26 ×

pasti bisa sis... coba deh pasang ntar saya cek kesana...

Reply
avatar
Mbah dinan
admin
19 Agustus 2015 10.25 ×

simple penerapannya namun bagus dalam tampilan...yang jelas bisa menjadi daya tarik tersend iri buat dblog kita gan, terutama pada area posting dengan efek tombol shadow ini. saya pelajari dulu dan terima kasih atas tutorialnya. salam sahabat blogger.

Reply
avatar
Thanks for your comment
close