Cara Membuat Tombol Dengan Efek Shadow dan Glow. Sobat Histutor setelah kemarin browsing di internet dan blogwalking, saya menemukan sebuah tutorial tentang cara membuat tombol dengan efek shadow dan glow, setelah saya baca artikelnya dan meilhat contoh Tombol yang ada, memang sangat menarik dan bagus-bagus sob...oleh karena itulah maka saya akan reshare di blog ini.
Selain ringan dan tidak membuat loading blog menjadi berat, pemasangannya juga ga ribet alias sulit sob...Ingin tahu penampakan dari tombol-tombol tersebut, silahkan ikuti langkah-langkahnya dibawah ini sob.
 |
| Cara Membuat Tombol Dengan Efek Shadow dan Glow |
2. Click On Template » Edit HTML
3. Gunakan Ctrl+F untuk menemukan kode
</head> 4. Setelah ketemu letakan kode
CSS script diatas kode </head> <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>6. Untuk Memanggilnya tambahkan kode HTML dibawah pada halaman postingan sobat.
<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>Klik Publikasikan dan lihat hasilnya.
HISTUTOR DEMO SAMPLE ×
Berikut adalah contoh Tombol dengan efek Shadow dan Glow silakan di hover dengan mouse sobat. Enjoy!
SEMOGA BERMANFAAT
SEMOGA BERMANFAAT
Silahkan tinggalkan komentar jika anda menemui kedala dalam pemasangan tombol ini, mari kita bahas bersama!
Demikian sedikit penjelasan tentang Cara Membuat Tombol Dengan Efek Shadow dan Glow, jika ada kesalahan dalam penulisan saya mohon maaf dan semoga bermanfaat. Saya akan sangat senang dan berterimakasih jika sobat berkenan untuk berkomentar di blog ini.
Sumber: All Tutorial
0 Comments: