Berbicara tentang button atau tombol sebagai bagian dari sebuah website atau blog, tentu sangat tinggi nilai urgensinya. Button download, log-in, button demo, tombol menu, dst., hampir semua web/blog memerlukannya untuk mempermudah user mendapatkan yang mereka cari (seperti: code, lagu, film, daftar/login, submit, dll.). Kali ini saya ingin berbagi ide dengan Anda tentang cara membuat button download animasi dengan menggunakan CSS3 saja.
Intinya, adalah menciptakan animasi pada elemen link (button) dengan style yang berbeda, baik saat hover (hover effects) maupun pada posisi aktif (active states). Pada contoh kali ini, kita akan membuat tombol yang besar dengan beberapa detail seperti sebuah icon, text utama, dan tanda panah dibagian kanan, serta keterangan harga yang muncul saat hover.
Markup atau struktur yang digunakan cukup sederhana, icon sebagai image dan elemen lainnya memakai span. Icon disini dapat anda sesuaikan kebutuhan button, dapat ditemukan di iconarchive.com.
Pada bagian CSS ini, kita akan memberikan style untuk efek transisi yang tepat, background color, text, pengunaan gradient linear, box shadow untuk menampilkan realistic effect pada hover. Harga atau keterangan pada button akan tidak nampak dengan men-set nilai opacity menjadi 0.
That's it!! Jika anda sudah cukup puas dengan contoh button seperti yang dilihat pada DEMO diatas, maka Anda boleh gunakan kode lengkap berikut ini (CSS + HTML)
Selamat Mencoba...:) Saya harap Anda akan menyukai Button Download Animasi CSS3 ini, dan berkreasi sesuai kreativitas Anda sendiri. Thanks !!
Read More
HTML
Markup atau struktur yang digunakan cukup sederhana, icon sebagai image dan elemen lainnya memakai span. Icon disini dapat anda sesuaikan kebutuhan button, dapat ditemukan di iconarchive.com.
<a href="#" class="a-btn">
<span class="a-btn-slide-text">25k</span>
<img src="images/icons/png" alt="icon" />
<span class="a-btn-text"><small>Daftar Sekarang/small>Download</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
CSS
Pada bagian CSS ini, kita akan memberikan style untuk efek transisi yang tepat, background color, text, pengunaan gradient linear, box shadow untuk menampilkan realistic effect pada hover. Harga atau keterangan pada button akan tidak nampak dengan men-set nilai opacity menjadi 0.
.a-btn{
background: #275713;
background: linear-gradient(top, #a9db80 0%,#96c56f 100%);
padding-left: 90px;
padding-right: 105px;
height: 90px;
display: inline-block;
position: relative;
border: 1px solid #80ab5d;
box-shadow:
0px 1px 1px rgba(255,255,255,0.8) inset,
1px 1px 3px rgba(0,0,0,0.2);
border-radius: 4px;
float: left;
clear: both;
margin: 10px 0px;
overflow: hidden;
transition: box-shadow 0.3s ease-in-out;
}
.a-btn img{
position: absolute;
left: 15px;
top: 13px;
border: none;
transition: all 0.3s ease-in-out;
}
.a-btn .a-btn-slide-text{
position: absolute;
font-size: 36px;
top: 18px;
left: 18px;
color: #6d954e;
opacity: 0;
text-shadow: 0px 1px 1px rgba(255,255,255,0.4);
transition: opacity 0.2s ease-in-out;
}
.a-btn-text{
padding-top: 13px;
display: block;
font-size: 30px;
text-shadow: 0px -1px 1px #80ab5d;
}
.a-btn-text small{
display: block;
font-size: 11px;
letter-spacing: 1px;
}
.a-btn-icon-right{
position: absolute;
right: 0px;
top: 0px;
height: 100%;
width: 80px;
border-left: 1px solid #80ab5d;
box-shadow: 1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-icon-right span{
width: 38px;
height: 38px;
opacity: 0.7;
border-radius: 20px;
position: absolute;
left: 50%;
top: 50%;
margin: -20px 0px 0px -20px;
border: 1px solid rgba(0,0,0,0.5);
background: #4e5c50 url(../images/arrow_down.png) no-repeat center center;
box-shadow:
0px 1px 1px rgba(255,255,255,0.3) inset,
0px 1px 2px rgba(255,255,255,0.5);
transition: all 0.3s ease-in-out;
}
Pada saat hover kita akan memberikan sesuatu yang berbeda, kita buat harga menjadi orginal size dan icon akan tidak tampak lagi. Kemudian tanda panah disebelah kanan button warna background akan berubah. Dan pada posisi aktiv icon panah akan berputar.
.a-btn:hover{
box-shadow:
0px 1px 1px rgba(255,255,255,0.8) inset,
1px 1px 5px rgba(0,0,0,0.4);
}
.a-btn:hover img{
opacity: 0;
}
.a-btn:hover .a-btn-slide-text{
opacity: 1;
transform: scale(1);
}
.a-btn:hover .a-btn-icon-right span{
opacity: 1;
background-color: #bc3532;
}
.a-btn:active {
position: relative;
top: 1px;
background: #5d81ab;
box-shadow: 1px 1px 2px rgba(0,0,0,0.4) inset;
border-color: #80a9da;
}
.a-btn:active .a-btn-icon-right span{
transform: rotate(360deg);
}
That's it!! Jika anda sudah cukup puas dengan contoh button seperti yang dilihat pada DEMO diatas, maka Anda boleh gunakan kode lengkap berikut ini (CSS + HTML)
<style type='text/css'>
.a-btn{
background: #275713;
background: -webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1));
background: -webkit-linear-gradient(top, #3C5A3C 0%, #508148 100%);
background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
background:linear-gradient(top, #80a9da 0%, #6f97c5 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 );
padding-left:90px;
padding-right:105px;
height:90px;
display:inline-block;
position:relative;
border:1px solid #5d81ab;
-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
float:left;
clear:both;
margin:10px 0px;
overflow:hidden;
-webkit-transition:box-shadow 0.3s ease-in-out;
-moz-transition:box-shadow 0.3s ease-in-out;
-o-transition:box-shadow 0.3s ease-in-out;
transition:box-shadow 0.3s ease-in-out;
}
.a-btn img{
position:absolute;
left:15px;
top:13px;
border:none;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
.a-btn .a-btn-slide-text{
position:absolute;
font-size:36px;
top:18px;
left:18px;
color:#bde086;
text-shadow:0px 1px 1px rgba(0,0,0,0.3);
-webkit-transform:scale(0);
-moz-transform:scale(0);
-ms-transform:scale(0);
-o-transform:scale(0);
transform:scale(0);
opacity:0;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
.a-btn-text{
padding-top:13px;
display:block;
font-size:30px;
text-shadow:0px -1px 1px #5d81ab;
color: #fff;
font-family: Oswald;
}
.a-btn-text small{
display:block;
font-size:11px;
letter-spacing:1px;
}
.a-btn-icon-right{
position:absolute;
right:0px;
top:0px;
height:100%;
width:80px;
border-left:1px solid #5d81ab;
-webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
-moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-icon-right span{
width:38px;
height:38px;
opacity:0.7;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
position:absolute;
left:50%;
top:50%;
margin:-20px 0px 0px -20px;
border:1px solid rgba(0,0,0,0.5);
background:#5b5b5b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyp4AWM_Jbq-2qKVrHElxMIG5n6LwSzrqgvBJ1cn0esF7QhhguDsC5p8n4IPGb6rG375agbdqity5ozPzehq3tO6QKWzLNSmRPd0jq0kXBYREnNkfLgcJc9O4m6uIXgxMXa5V1KucNjMc/s1600/arrow_down.png) no-repeat center center;
-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
box-shadow:0px 1px 1px rgba(255,255,255,0.3) inset, 0px 1px 2px rgba(255,255,255,0.5);
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
.a-btn:hover{
-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);
}
.a-btn:hover img{
opacity:0;
}
.a-btn:hover .a-btn-slide-text{
opacity:1;
-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
-o-transform:scale(1);
transform:scale(1);
}
.a-btn:hover .a-btn-icon-right span{
opacity:1;
background-color: #45BC32;
}
.a-btn:active{
position:relative;
top:1px;
background:#5d81ab;
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
border-color:#80a9da;
}
.a-btn:active .a-btn-icon-right span{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
</style>
<a href="#" class="a-btn">
<span class="a-btn-slide-text">30K</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj01VO6dqhoc4e7y_agPs4D7Jt2eCC2zfYJ2b64dWMP_lE2s4GQmYERzCtL52GFft4u2VVUMm6yobSdl2NLfme5GbqRU99FdsIEj0FjmiZl-Awv-fEgHDkL1kjyAbP8ZhaGFJ0OyoxPz4s/s1600/Android-FileTransfer-icon.png" alt="Android" />
<span class="a-btn-text"><small>Daftar sekarang &</small> Download</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
<a href="#" class="a-btn">
<span class="a-btn-slide-text">Free</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHxWGjpVt6iC_sCSvJJUZ9QwOfB_Z7J_DqM62le8PJ2ldUMriCYA4DW-RhC-u9m4fNZ9Fw3_HEtsjrSH04ok8tVKi8fYuFjiKiiZqczE3t-RDXOzlkQ2VYjsoSK33yJJz4yEN7poA7H_E/s1600/DivXPlayer-icon.png" alt="Player" />
<span class="a-btn-text"><small>Join for Free &</small> Download</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
<a href="#" class="a-btn">
<span class="a-btn-slide-text">$20</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLp2JBSqf841eoOBzlTtxsRXw0vsZwznb9aNKNB1MB4coKsS4ZKUir34HReY35E93phQfhHHVwTCtGy2oSqao5kyJtUl8_XVDRjJ166eshoclA6WEkgHGDLkY1lJ5PcKMsHG36COnZLCo/s1600/DVD-icon.png" alt="DVD" />
<span class="a-btn-text"><small>Register right now &</small> Download</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
<a href="#" class="a-btn">
<span class="a-btn-slide-text">$5</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc6i5Lj7FGJwMXGa5NHTK7fGTJmJU_2mTJRhZJQhJqh2v_eA0BrJrTcZ4wPLXCFiIRNq54g901M8EoYc86p3brH_0C-nd4IwCF5qlt29Gksa7y9eldNvAEkdxD0dAGx7T0mdMICf8baMg/s1600/seo-web-code-icon.png" alt="web code" />
<span class="a-btn-text"><small>Log in Now &</small> Download</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
Selamat Mencoba...:) Saya harap Anda akan menyukai Button Download Animasi CSS3 ini, dan berkreasi sesuai kreativitas Anda sendiri. Thanks !!
Harap dicatat bahwa animasi / transisi hanya akan bekerja pada browser yang mendukung properti CSS3.
recources:
http://tympanus.net/codrops/2011/11/07/animated-buttons-with-css3/
http://www.iconarchive.com/
http://tympanus.net/codrops/2011/11/07/animated-buttons-with-css3/
http://www.iconarchive.com/
