√ Cara Membuat Animasi Slide Button di Postingan Blog - AdityaTekno

Social Items

AdityaTekno.com - Cara Membuat Animasi Slide Button di Postingan Blog. Adanya animasi pada tampilan blog/web sangatlah penting sekali dan sekarang hampir semua desain blog/web sudah menggunakan animasi dan efek-efek yang sangat menarik untuk dilihat, dan itu semua bertujuan untuk mempercantik dan membuat blog/web terlihat dinamis.
Membuat Animasi Slide Button di Postingan Blog

Dengan berkembangnya teknologi saat ini membuat kita lebih mudah dalam membuat suatu animasi pada tampilan blog/web, misalnya saja dengan CSS, JavaScript, jQuery, dan lain sebagainya. Nah, kali ini saya akan membagikan tutorial sederhana tentang animasi yaitu Cara Membuat Animasi Slide Button di Postingan Blog.

Dan tutorial yang saya bagikan ini berbeda dengan yang lain, anda hanya perlu meletakkan kode CSS untuk membuat sebuah animasi, jadi tidak perlu menggunakan kode javascript. Karena button ini menggunakan efek "hover" dan "inset" sederhana sehingga tidak akan membebani kinerja blog.

Cara Membuat Animasi Slide Button di Postingan Blog


1. Masuk ke Blogger >> Tema >> Edit HTML.

2. Letakkan kode ini di atas kode </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;}

3. Kemudian Simpan Tema.

Cara Penerapan di Postingan Blog


1. Buat Entri Baru, kemudian buka tab HTML (bukan di tab Compose ya).

2. Lalu letakkan kode berikut di tab HTML tadi, anda pilih salah satu saja.
<div id="wrap"><a class="btn" href="#">Button</a></div>
<div id="wrap"><a class="btn warn" href="#">Button</a></div>

Mudah sekali bukan cara membuat animasi slide button, dan sangat simple. Saya jamin pasti anda langsung bisa.

See the Pen Animasi Slide Button by AdityaTekno (@adityatekno) on CodePen.


Demikian Cara Membuat Animasi Slide Button di Postingan Blog. Semoga bisa bermanfaat dan sampai jumpa dipostingan selanjutnya. Salam AdityaTekno.com

Cara Membuat Animasi Slide Button di Postingan Blog

AdityaTekno.com - Cara Membuat Animasi Slide Button di Postingan Blog. Adanya animasi pada tampilan blog/web sangatlah penting sekali dan sekarang hampir semua desain blog/web sudah menggunakan animasi dan efek-efek yang sangat menarik untuk dilihat, dan itu semua bertujuan untuk mempercantik dan membuat blog/web terlihat dinamis.
Membuat Animasi Slide Button di Postingan Blog

Dengan berkembangnya teknologi saat ini membuat kita lebih mudah dalam membuat suatu animasi pada tampilan blog/web, misalnya saja dengan CSS, JavaScript, jQuery, dan lain sebagainya. Nah, kali ini saya akan membagikan tutorial sederhana tentang animasi yaitu Cara Membuat Animasi Slide Button di Postingan Blog.

Dan tutorial yang saya bagikan ini berbeda dengan yang lain, anda hanya perlu meletakkan kode CSS untuk membuat sebuah animasi, jadi tidak perlu menggunakan kode javascript. Karena button ini menggunakan efek "hover" dan "inset" sederhana sehingga tidak akan membebani kinerja blog.

Cara Membuat Animasi Slide Button di Postingan Blog


1. Masuk ke Blogger >> Tema >> Edit HTML.

2. Letakkan kode ini di atas kode </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;}

3. Kemudian Simpan Tema.

Cara Penerapan di Postingan Blog


1. Buat Entri Baru, kemudian buka tab HTML (bukan di tab Compose ya).

2. Lalu letakkan kode berikut di tab HTML tadi, anda pilih salah satu saja.
<div id="wrap"><a class="btn" href="#">Button</a></div>
<div id="wrap"><a class="btn warn" href="#">Button</a></div>

Mudah sekali bukan cara membuat animasi slide button, dan sangat simple. Saya jamin pasti anda langsung bisa.

See the Pen Animasi Slide Button by AdityaTekno (@adityatekno) on CodePen.


Demikian Cara Membuat Animasi Slide Button di Postingan Blog. Semoga bisa bermanfaat dan sampai jumpa dipostingan selanjutnya. Salam AdityaTekno.com
Load Comments

Dapatkan Artikel Tips AdSense, Blogging, SEO setiap harinya.

Notifications

Disqus Logo