Membuat Animasi Button Hover dengan CSS3

membuat animasi button hover menggunakan css3

Membuat Animasi Button Hover dengan CSS3 - Seiring berkembangnya waktu dan juga teknologi maka berkembang pula kreatifitas para web designer dalam memperindah tamplian website yang didevelopnya. Dulu kita sering melihat button yang berubah warna ketika pointer mouse kita letakkan diatas button, ada juga yang membuat warna tulisannya yang berubah. Semua itu sudah berkembang menjadi jauh lebih baik seperti pada demo yang saya buat berikut ini.



Dalam tutorial ini saya akan memberikan satu efek animasi yang saya gunakan pada tombol demo saya yang diatas.

Markup

<body>
    <div class="container">
        <button class="btn btn_effect">Button</button>
    </div>
</body>

Tombol diatas dibuat menggunakan tag button yang saya beri class "btn" dan juga "btn_effect" sebagai selector css. Saya juga menggunakan pseudo element untuk membuat animasi yang akan kelihatan miring sebanyak 45 derajat itu, dan yang terkahir saya memberikan efek opacity agar animasinya terlihat lebih keren sob.

Karena interface tombol bawaan sangat jelek dan membosankan jadi kita buat dulu style tombol kita sendiri, kodenya sebagai berikut.

.btn{
    padding: 25px 80px;
    cursor: pointer;
    overflow : hidden;
    background: none;
    border: 3px solid #3498db;
    border-radius: 0;
    color: #3498db;
    font-size: 23px;
    position: relative;
    z-index : 1;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}


Position relative saya berikan karena saya ingin membuat pseudo element button ini position absolute, perlu diingat bahwa position absolute tidak akan memberikan efek apa-apa jika tag parentnya position: static, dan perlu diingat juga position default dalam css adalah static.
Overflow hidden membuat elemen yang keluar dari border class "btn" tidak akan kelihatan alias terpotong alias disembunyikan :D.

Berikut adalah style default untuk pseudo element yang saya bicarakan sebelumnya.

.btn:before{
    position: absolute;
    content: '';
    z-index: -1;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

Position absolute akan membuat posisi pseudo element berpatokan kepada tag parentnya.
Ini dia kunci dari membuat animasi button hover dengan css3.

.btn_effect:before{
    width: 100%;
    height: 0;
    background-color: #3498db;
    -moz-opacity: 0;
    opacity: 0;
    top: 50%;
    left: 50%;
    -moz-transform : translate(-50%,-50%) rotate(45deg);
    -webkit-transform : translate(-50%,-50%) rotate(45deg);
    transform : translate(-50%,-50%) rotate(45deg);
}

Kita akan membuat warna background pseudo element sama dengan border button yang sudah kita buat. Trik agar pseudo element tersebut bisa miring 45 derajat ada pada properti transform rotate, properti transform translate x dan y kita buat -50% agar posisi pseudo element tetap ditengah walaupun pada saat value dari properti heightnya dinaikkan.

.btn_effect:hover:before{
    height: 240%;
    -moz-opacity: 1;
    opacity: 1;
}

Kode diatas mendeskripsikan ketika class "btn_effect" dihover maka pseudo element before akan mendapatkan properti height dan opacity.
Dan sebagai sentuhan terakhir kita berikan kepada tulisan "button" pada tombol sebagai berikut.

.btn:hover{
     color : #fff;
}

Kalau teman - teman merasa artikel ini bermanfaat silahkan dishare dan berikan comment jika ada dari kode diatas yang tidak dimengerti, efek - efek lain yang ada pada demo kurang lebih menggunakan properti css yang sama hanya berbeda dibagian valuenya saja. Semoga artikel ini bermanfaat dan dapat menjadi referensi buttoh hover teman - teman, terima kasih.

Share this

Related Posts

Previous
Next Post »