Tipsim.com - Cara membuat button demo dan download dengan efek animasi keren. Jumpa lagi dengan saya di blog TipsIM. Pada kesempatan kali ini saya akan berbagi tutorial yang cocok untuk anda terapkan pada blog download anda, yaitu button demo dan download dengan efek animasi yang keren.
Button atau tombol demo dan download ini memiliki warna gradien. Nah ketika kursor diletakkan di atas tombol tersebut, maka warna gradiennya akan berjalan, seperti efek kaca mengkilat itu sob. Kalau di film animasi cars lightning mcqueen biasa disebut dengan "ka-chaw!" atau kicau men, silau men. Haha..
Sudah,,, cukup basa-basinya, langsung saja simak langkah-langkah pemasangannya di bawah ini sob.
Langkah-langkah Memasang Button Demo dan Download dengan Efek Animasi Keren
1. Silahkan copy kode CSS berikut ini dan pastekan atau letakkan pada edit template di atas kode </head>.
<style>
.TIMbutton {
padding:15px;
margin:15px;
width:100%;
text-align:center;
}
.TIMdownload {
margin:5px;
padding:15px 25px;
text-decoration:none;
color: #fff;
background: -webkit-gradient(to right,#16a085 0%,#F5D76E 50%,#D24D57 100%);
background: linear-gradient(to right,#16a085 0%,#F5D76E 50%,#D24D57 100%);
background-size: 500%;
border-radius: 5rem;
border: none;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-family: arial, sans-serif;
font-size: 1.5em;
letter-spacing: 0.05em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
outline: none;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}
.TIMdownload:hover {
animation-name: gradient;
-webkit-animation-name: gradient;
animation-duration: 2s;
-webkit-animation-duration: s;
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
.TIMdownload:after{
content:"\f019";
font-family:fontawesome;
font-size:20px;
padding-left:10px;
}
.TIMdemo {
margin:5px;
padding:15px 25px;
text-decoration:none;
color: #fff;
background: -webkit-gradient(to right,#2980b9 0%,#F5D76E 50%,#e67e22 100%);
background: linear-gradient(to right,#2980b9 0%,#F5D76E 50%,#e67e22 100%);
background-size: 500%;
border-radius: 5rem;
border: none;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-family: arial, sans-serif;
font-size: 1.5em;
letter-spacing: 0.05em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
outline: none;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}
.TIMdemo:hover {
animation-name: gradient;
-webkit-animation-name: gradient;
animation-duration: 2s;
-webkit-animation-duration: s;
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
.TIMdemo:after{
content:"\f1d8";
font-family:fontawesome;
font-size:20px;
padding-left:10px;
}
@keyframes gradient {
0%
{background-position: 0% 50%;}
100%
{background-position: 100% ;}
}
</style>
2. Kemudian untuk cara penggunaannya, silahkan anda copy kode HTML berikut ini dan pastekan pada setiap postingan blog anda yang ingin dikasih tombol demo dan download. Ingat, di dalam HTML bukan Compose.
<div class="TIMbutton">
<a class="TIMdemo" href="#" target="_blank">DEMO</a>
<a class="TIMdownload" href="#" target="_blank">DOWNLOAD</a>
</div>
3. Jika icon pada tombol demo dan download tidak muncul, silahkan copy kode pemanggil icon font awesome berikut ini dan pastekan di atas kode </head> atau </body>.
<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
Untuk lebih jelas hasilnya seperti apa, silahkan lihat demonya di bawah ini.
Oke, demikian postingan saya mengenai button demo dan download dengan efek animasi keren. Semoga bisa memberikan manfaat bagi kita semua. Terima kasih telah meluangkan waktunya untuk berkunjung dan membaca.
test