Cara Membuat Animasi Button Pure CSS
Seotechman.com, Bogor 05/12/2018. Sebelum ketopik pembahasan alangkah baiknya jika kita mengenal terlebih dahulu button tersebut.
Apa itu button?
Button adalah sebuah tombol atau kenop yang banyak dipergunakan, entah itu pada perangkat user interface seperti android, maupun web, blog, dan lain sebagainya.
Button juga bisa disebut sebagai alat pembungkus yang dapat dibuat dengan menggunakan element <button> untuk mengeksekusinya seperti, tombol login, tombol logout, tombol pencarian, atau menu-menu lainnya.
Button dapat berisi tulisan, gambar, icon, atau kombinasi lain. Dan, button juga bisa kalian hias atau kalian percantik dengan menggunakan CSS, hingga sedemikian rupa sesuai dengan selera kalian masing-masing.
Nah, pada kesempatan kali ini saya akan coba memberikan tutorial atau cara tentang bagaimana membuat button animasi dengan css.
Simak selengkapnya dibawah ini,
Cara Membuat Animasi Button Pure CSS
Pertama yang harus kita buat adalah css nya terlebih dahulu. Sebagai contoh CSS nya bisa kalian perhatikan dibawah, setelah itu kalian copy paste dan simpan pada style.css
Kode CSS
.button {
position: relative;
background: #4CAF50;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari browser */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.button:after {
content: " ";
background: #F1F1F1;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s;
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0;
}Setelah selesai membuat CSS nya, kita lanjut dengan kode HTML untuk memanggil button tersebut, dan simpan pada index.html
Perhatikan kode HTML di bawah ini:
Kode HTML
<button class="button">Click Here</button>Jika digabungkan akan menjadi seperti ini:
<!DOCTYPE html>
<html>
<head>
<style>
.button {
position: relative;
background: #4CAF50;
border: none;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s; /* Safari browser */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.button:after {
content: " ";
background: #F1F1F1;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s;
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0;
}
</style>
</head>
<body>
<h2>Animasi Button - Ripple Effect</h2>
<button class="button">Click Here</button>
</body>
</html>Cara Membuat Animasi Button Pure CSS Bagian #2
Pada bagian pertama kita telah mencoba membuatnya dengan sangat simpel, tidak ada tingkat kesulitan sama sekali. Lain beda dengan pada bagian kedua yang akan kita bahas saat ini juga.
Apa ada perbedaannya atau sama saja dengan bagian pertama?
Jelas berbeda, dari struktur kodenya pun akan sedikit lebih menarik dan hasilnya pun mungkin lebih bagus dari bagian yang pertama.
Apakah ada penambahan javascript? Tentu tidak ada campur tangan sedikitpun dari javascript, karena disini saya membuatnya pure dengan CSS saja.
Oke, kita langsung saja mempraktekannya pada bagian yang kedua ini.
Lihat dan perhatikan kode CSS dibawah ini:
Kode CSS
button {
font-family: 'Hind Guntur', sans-serif;
font-size: 15px;
line-height: 1;
color: #fff;
letter-spacing: 0.025em;
background: #379aff;
padding: 18px 0 11px;
cursor: pointer;
border: 0;
border-radius: 2px;
min-width: 120px;
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
button span {
display: block;
position: relative;
z-index: 10;
}
button:after,
button:before {
padding: 18px 0 11px;
content: '';
position: absolute;
top: 0;
left: calc(-100% - 30px);
height: calc(100% - 29px);
width: calc(100% + 20px);
color: #fff;
border-radius: 2px;
transform: skew(-25deg);
}
button:after {
background: #fff;
transition: left 0.8s cubic-bezier(0.86, 0, 0.07, 1) 0.2s;
z-index: 0;
opacity: 0.8;
}
button:before {
background: #13c276;
z-index: 5;
transition: left 1s cubic-bezier(0.86, 0, 0.07, 1);
}
button:hover:after {
left: calc(0% - 10px);
transition: left 0.8s cubic-bezier(0.86, 0, 0.07, 1);
}
button:hover:before {
left: calc(0% - 10px);
transition: left 1s cubic-bezier(0.86, 0, 0.07, 1);
}Setelah selesai semua, silahkan kalian lihat hasilnya.
Note: Untuk kode warna, bisa disesuaikan dengan keinginan masing-masing.
Demikian cara membuat animasi button pure CSS. Semoga bermanfaat, akhir kata saya ucapkan terimakasih.
