Cara Membuat Aniamasi Button Loading

Cara Membuat Aniamasi Button Loading - Banyak sekali desain button yang bisa kita buat dengan CSS, misalnya saja button animasi, flat button dan desain button lainnya. Nah, pada kesempatan kali ini saya akan membagikan tutorial untuk mendesain tampilan button yakni Cara Membuat Aniamasi Button Loading. Buat kalian yang ingin mencoba membuat animasi button tidak ada salahnya untuk mencobanya, berikut ini akan saya praktekan Cara Membuat Aniamasi Button Loading.

Langkah 1 : Cara Membuat Aniamasi Button Loading

Baiklah, langkah pertama silahkan buat file index.html kemudian ketikan struktur HTML sederhana untuk membuat button, pada kasus ini button yang kita buat tidak seperti membuat button biasanya dengan tag button namun button yang kita buat kali ini dengan memanipulasi tag a menjadi button.

<body>
    <div id="wrapper">
      <div id="btn">
        <a href="" class="content">SUBMIT</a>
      </div>
    </div>
</body>

Langkah 2 : Cara Membuat Aniamasi Button Loading

Setelah membuat struktur HTML, langkah selanjutnya adalah mendesain tampila button dengan CSS, untuk itu silahkan kalian ketikan sintak CSS berikut untuk mendesain tampilan button dan membuat animasi button loadingnya.

@import url('https://fonts.googleapis.com/css?family=Comfortaa');
#wrapper {
  margin: 50px;
}

#btn {
  border: 2px solid #E91E63;
  border-radius: 25px 25px;
  width: 150px;
  height: 40px;
  display: block;

  background: linear-gradient(to right, #E91E63 50%, white 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all .6s ease-out;
}

#btn:hover {
  background-position: left bottom;
  border: 2px solid black;
}

.content {
  font-family: 'Comfortaa', cursive;
  font-weight: bold;
  text-align: center;
  font-size: 14px;
  line-height: 40px;
  color: #E91E63;
  transition: all .7s ease-out;
  display: block;
  text-decoration: none;
}

.content:hover {
  color: white;  
}

Setelah semua sintak HTML dan CSS telah diketikan, pastikan simpan kembali filenya kemudian silahkan buka pada browser masing - masing untuk melihat hasilnya. Selesai

Bagaimana, cukup menarik bukan desain button yang ditampilkan ? Baiklah, cukup sekian tutorial sederhana mengenai Cara Membuat Aniamasi Button Loading, semoga tutorial ini bisa bermanfaat dan menambah referensi dalam mendesain tampilan web. Selamat mencoba :)

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