Cara Membuat Button Animasi Pure Css
Penerbit: ( Virm Aditya )

Cara Membuat Button Animasi Pure Css


Cara Membuat Button Animasi Pure Css
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 webs, 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.

Pertama yang harus kita buat adalah css nya terlebih dahulu. Sebagai contoh css nya bisa kalian perhatikan dibawah, dan bisa kalian copy paste dan simpan pada style.css

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 :


<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>

Link demo dibawah ini:


Cara membuat button animasi 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 membuatnnya pure dengan css.

Oke, kita langsung saja mempraktekannya pada bagian yang kedua ini.

Lihat baik-baik dan perhatikan kode css dibawah ini:


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);
}

Untuk link demonya dibawah ini:

Live Demo

Setelah selesai semua, silahkan kalian lihat hasilnya dan untuk kode warna bisa kalian kreasikan sendiri, selamat mencobanya.

Itulah Cara Membuat Button Animasi Pure Css. Semoga bermanfaat, akhir kata saya ucapkan terimakasih.

Load comments