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.

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

@import url('https://fonts.googleapis.com/css?family=Hammersmith+One');
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 :)

6 Mei 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat