Cara Membuat Animasi Slide pada Button

Cara Membuat Animasi Slide pada Button - Animasi pada tampilan web sangatlah penting dan sekarang hampir semua desain web sudah menggunakan animasi dan efek - efek yang sangat menarik untuk dilihat, tujuan nya adalah tidak lain untuk mempercantik dan membuat web terlihat dinamis. Dengan berkembangnya teknologi saat ini membuat kita lebih mudah dalam membuat suatu animasi pada tampilan web, misalnya dengan javascript, jQuery CSS dan lain sebagainya. Nah, berikut ini saya akan bagikan tutorial sederhana mengenai animasi yakni Cara Membuat Animasi Slide pada Button. Silahkan simak langkah langkah nya berikut ini.

Langkah 1 : Cara Membuat Animasi Slide pada Button

Kita mulai membuat animasi button dengan membuat struktur sederhana HTML untuk membuat button terlebih dahulu, silahkan buat tampilan button seperti berikut.

<body>
    <button class="animate">&nbsp;</button>
    <button class="animate slide">&nbsp;</button>
</body>

Langkah 2 : Cara Membuat Animasi Slide pada Button

Pada kasus ini, animasi yang akan dibuat dengan memanfaatkan sintak - sintak dari CSS, mulai dari hover, transition dan lain sebagainya. Untuk itu silahkan ketikan sintak CSS3 berikut untk membuat animasi pada button.

button {
  position: relative;
  height: 50px;
  width: 150px;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 2px;
  color: #0988A9;
  border: 2px #0988A9 solid;
  border-radius: 25px 25px;
  overflow:hidden;
  background: transparent;
  cursor: pointer;
}

.animate:after{
  content:"SUBMIT";
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  text-align:center;
  -webkit-transition: all 400ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

.animate:before {
  content:"MORE →";
  height:100%;
  width:100%;
  position:absolute;
  color:#0988A9;
  left:-100%;
  opacity: 0;
  -webkit-transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

.animate:hover{
  background:#0988A9;
}

.animate:hover:before{
  left:0;
  opacity:1;
  color:#fff;
}
.animate:hover:after{
  left:100%;
  opacity:0;
}

.animate.slide:hover{
  background: transparent;
}

.animate.slide:before {
  left:100%;
  color:#0988A9;
  -webkit-transition: all 425ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

.slide:hover:before{
  left:0;
}

Setelah semua sintak HTML dan CSS telah diketikan, silahkan simpan filenya dengan nama index.html kemudian buka pada browser masing - masing dan lihat hailnya, maka tampilan button akan seperti gambar dibawah ini.

Cara Membuat Animasi Slide pada Button

Bagaiaman, cukup menarik bukan tampilan button yang ditampilkan ? baik, cukup sekian tutorial sederhana mengenai bagaimana Cara Membuat Animasi Slide pada Button, semoga tutorial mengenai animasi ini bisa bermanfaat dan menambah referensi dalam membuat animasi dengan CSS, selamat mencoba :)

20 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 Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat