Cara Menambahkan Animasi pada Button dengan CSS3
Cara Menambahkan Animasi pada Button dengan CSS3 - Banyak sekali cara untuk kita mendesain sebuah tombol button pada tampilan website, misalnya dengan menambahkan efek, animasi ataupun desain tombol button lainnya dengan bantuan CSS3. Pada kesempatan kali ini akan saya bagikan tutorial mengenai bagaimana Cara Menambahkan Animasi pada Button dengan CSS3. Nah, buat kalian yang ingin mencoba membuat tombol button dengan menambahkan animasi, tidak ada salahnya untuk mencoba tutorial yang akan saya praktekan berikut ini.
Langkah 1 : Cara Menambahkan Animasi pada Button dengan CSS3
Baik, langsung saja kita mulai praktekan membuat animasi button, langkah pertama adalaha membuat struktur sederhana untuk membuat buttonnya, pada kasus ini kita akan membuat button tidak seperti biasanya yakni kita akan membuat tombol button dengan tag a href dan tag span untuk menambahkan animasi - animasinya. Silahkan ketikan struktur HTML seperti berikut.
<div id="wrapper">
<span class="top"></span>
<span class="right"></span>
<span class="left"></span>
<span class="bottom"></span>
<a href="#">SUBMIT</a>
</div>
</body>
Langkah 2 : Cara Menambahkan Animasi pada Button dengan CSS3
Setelah membuat struktur seperti diatas, selanjutnya kita akan membuat desain dan tentunya menambahkan animasi pada button dengan sintak CSS3 berikut.
body { background: #000000; }
#wrapper a {
text-decoration: none;
font-size: 22px;
color: #ffffff;
font-family: 'Hammersmith One', sans-serif;
}
#wrapper {
width: 130px;
margin: auto;
height: 30px;
padding: 12px;
display: block;
cursor: pointer;
line-height: 30px;
text-align: center;
border: 3px solid #D04E2E;
background-color: #D04E2E;
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
}
#wrapper:hover {
background-color: #FE5A27;
border: 3px solid #FE5A27;
}
#wrapper span {
position: absolute;
background: none;
transition: 0.4s ease;
-webkit-transition: 0.4s ease;
}
#wrapper .left,
#wrapper .right {
height: 50%;
width: 2px;
}
#wrapper .top,
#wrapper .bottom {
width: 50%;
height: 2px;
}
#wrapper .left {
left: -2px;
bottom: -140%;
}
#wrapper:hover .left {
background: #FE5A27;
bottom: 0;
border-radius: 40px;
}
#wrapper .right {
right: -2px;
top: -140%;
}
#wrapper:hover .right {
background: #FE5A27;
top: 0;
}
#wrapper .top {
top: -2px;
left: -140%;
}
#wrapper:hover .top {
background: #FE5A27;
left: 0;
}
#wrapper .bottom {
bottom: -2px;
right: -140%;
}
#wrapper:hover .bottom {
background: #FE5A27;
right: 0;
}
Setelah semua sintak telah diketikan, simpan filenya dengan nama index.html kemudian silahkan buka pada browser masing - masing dan lihat hasilnya. Maka ketika kursor mengarah atau mengklik tombol button akan terjadi animasi. Selesai
Baik, cukup sekian tutorial sederhana mengenai Cara Menambahkan Animasi pada Button dengan CSS3, semoga tutorial ini bisa bermanfaat dan menambah referensi dalam membuat animasi dengan CSS, selamat mencoba :)
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
