Cara Membuat Animasi Pulsing Button

Cara Membuat Animasi Pulsing Button - Animasi pulsing merupakan animasi sederhana pada suatu elemen seolah-olah elemen tersebut berdenyut. Biasanya animasi pulsing banyak kita lihat pada button, box, gambar atau elemen yang lainnya. Nah, buat kalian yang ingin membuat animasi pulsing, saya akan bagikan tutorialnya. Silahkan kalian bisa ikuti langkah-langkah Cara Membuat Animasi Pulsing Button berikut ini.

Untuk membuat animasi pulsing, kita harus menentukan elemen apa yang akan dikenai animasi, dalam kasus ini saya akan menerapkan animasi pulsing pada elemen button. Silahkan kalian bisa ketikan sintak untuk membuat button dan struktur sederhana HTML seperti berikut.

<body>
  <div class="container">
    <div class="item button-pulse">
        <div class="box-button">
            <div class="pulsing"></div><button>Button.</button>
        </div>
    </div>
  </div>
</body>

Setelah membuat struktur dan elemen button seperti diatas, langkah selanjutnya adalah mendesain button dan tentunya membuat animasi pulsing, animasi pulsing akan dibuat dengan menggunakan sintak CSS seperti berikut.

body {
  color: #fff;
  background: darkcyan;
}
* {
  box-sizing: border-box;
}
*:before, *:after {
  content: "";
  position: absolute;
}
.container {
  display: grid;
  width: 100%;
}
.container .item {
  display: grid;
  grid-template-rows: 1fr min-content;
  align-items: center;
  justify-content: center;
  height: 50vh;
  flex-wrap: wrap;
  background: var(--bg-color);
}
button {
  background: transparent;
  color: #fff;
  border: 3px solid #fff;
  border-radius: 50px;
  padding: 0.8rem 2rem;
  outline: none;
  cursor: pointer;
  position: relative;
  transition: 0.2s ease-in-out;
  letter-spacing: 2px;
}
.box-button {
  display: inline-block;
  position: relative;
  width: 200px;
  height: 65px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.button-pulse button {
  background: darkcyan;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.box-button:hover .pulsing:before {
  animation: pulsing 0.2s linear infinite;
}
.box-button:hover .pulsing:after {
  animation: pulsing1 0.5s linear infinite;
}
.pulsing {
  width: 99%;
  height: 99%;
  border-radius: 50px;
  z-index: 1;
  position: relative;
}
.pulsing:before, .pulsing:after {
  width: 100%;
  height: 100%;
  border: inherit;
  top: 0;
  left: 0;
  z-index: 0;
  background: #fff;
  border-radius: inherit;
  animation: pulsing 2.5s linear infinite;
}
.pulsing:after {
  animation: pulsing1 2.5s linear infinite;
}
@keyframes pulsing {
  0% {
    opacity: 1;
    transform: scaleY(1) scaleX(1);
  }
  20% {
    opacity: 0.5;
  }
  70% {
    opacity: 0.2;
    transform: scaleY(1.8) scaleX(1.4);
  }
  80% {
    opacity: 0;
    transform: scaleY(1.8) scaleX(1.4);
  }
  90% {
    opacity: 0;
    transform: scaleY(1) scaleX(1);
  }
}
@keyframes pulsing1 {
  0% {
    opacity: 1;
    transform: scaleY(1) scaleX(1);
  }
  20% {
    opacity: 0.5;
  }
  70% {
    opacity: 0.2;
    transform: scaleY(1.3) scaleX(1.15);
  }
  80% {
    opacity: 0;
    transform: scaleY(1.3) scaleX(1.15);
  }
  90% {
    opacity: 0;
    transform: scaleY(1) scaleX(1);
  }
}

Setelah semua sintak HTML & CSS telah diketikkan, silahkan simpan file-nya lalu kalian buka file-nya pada browser masing-masing untuk melihat hasilnya.

Baik, itulah tutorial bagaimana Cara Membuat Animasi Pulsing Button. Semoga bermanfaat. Selamat mencoba dan sampai jumpa lagi ditutorial DUMET School selanjutnya.

20 Januari 2020

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