Animated Gradient Button (Pure CSS)

---

Tutorial Blog: Cara Membuat Animated Gradient Button (Pure CSS)

Masuk Blogger: Tema > Edit HTML

Tambahkan kode CSS berikut ini sebelum kode ]]></b:skin> atau </style>

.body {
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn,
.btn2 {
  width: 300px;
  height: 100px;
  font-size: 30px;
  text-align: center;
  line-height: 100px;
  color: rgba(255,255,255,0.9);
  border-radius: 50px;
  background: linear-gradient(-45deg, #ffa63d, #ff3d77, #338aff, #3cf0c5);
  background-size: 600%;
  -webkit-animation: anime 16s linear infinite;
          animation: anime 16s linear infinite;
}
.btn2 {
  position: absolute;
  margin-top: -70px;
  z-index: -1;
  -webkit-filter: blur(30px);
          filter: blur(30px);
  opacity: 0.8;
}
@-webkit-keyframes anime {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes anime {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

Simpan Tema

Untuk menampilkan hasilnya, tambahkan kode HTML berikut ini pada postingan bagian Compose HTML

<div class='body'>
<a href='#'><div href='#' class="btn">
Gradient Button
<div class="btn2">
</div>
</div>
</a>
</div>

CSS .body

justify-content center posisi tombol tengah

justify-content flex-end posisi tombol kanan

justify-content none posisi tombol default (kiri)


   DEMO