Membuat Button Glow Animation HTML CSS

Sharing Teknologi – Membuat Button Glow Animation Effect HTML CSS Di WordPress. Apakah Sobat teknologi [dot] visitklaten [dot] com ingin Membuat Button Glow Animation HTML CSS Di WordPress. 

HTML, atau HyperText Markup Language, adalah bahasa markup yang digunakan untuk membuat struktur dasar halaman web.

Tim Berners-Lee mengembangkan HTML pada tahun 1991 sebagai fondasi bagi konten web. HTML menggunakan serangkaian “tags” atau tanda untuk mendefinisikan elemen-elemen seperti teks, gambar, dan tautan dalam halaman. Tag ini membentuk struktur hierarkis, memungkinkan pengembang menyusun konten dalam dokumen HTML. Sebagai contoh, tag <head> berisi informasi dokumen, seperti judul halaman, sementara tag <body> memuat konten utama.

CSS, atau Cascading Style Sheets, adalah bahasa gaya yang bekerja bersama HTML untuk mempercantik dan memformat tampilan halaman web. CSS memungkinkan pengembang mengontrol tata letak, warna, dan gaya elemen HTML. Dengan pemisahan antara struktur dan presentasi, CSS memungkinkan perubahan gaya tanpa memengaruhi kerangka dasar halaman.

CSS beroperasi melalui aturan dengan menyertakan selektor (elemen yang akan diubah gayanya) dan properti (cara elemen tersebut akan diubah). Misalnya, aturan CSS dapat mengubah font dan warna teks pada semua paragraf dalam halaman web. Responsivitas juga merupakan fitur kunci CSS, memungkinkan desainer menyesuaikan tampilan halaman untuk berbagai perangkat, mulai dari komputer desktop hingga perangkat mobile.

HTML dan CSS bekerja secara sinergis, di mana HTML menyediakan struktur dan konten dasar, sementara CSS menangani presentasi. Dengan kemajuan HTML5 dan CSS3, pengembang memiliki akses ke fitur-fitur baru untuk meningkatkan kreativitas dan fungsionalitas halaman web, menjadikan kombinasi keduanya sebagai fondasi utama dalam pengembangan web modern.

NB: kami menggunakan tambahan CSS dari bootstrap.

Membuat Button Glow Animation

Silakan Copas kode dibawah ini. Rekan-rekan bisa mengubahnya sesuai dengan kebutuhan. 

Untuk contoh hasilnya ada di paling bawah ya, silakan scroll ke bawah.

HTML

<div class="position-relative p-3 my-1 overflow-hidden">
<div class="buttonglow">
	<button class="glowing-btn">
		<span class="glowing-txt">C<span class="faulty-letter">L</span>ICK</span>
	</button>
</div>
</div>

Style CSS

@import url("https://teknologi.visitklaten.com/cloudme.fonts.googleapis.com/css?family=Raleway");

:root {
  --glow-color: hsl(186 100% 69%);
}

.buttonglow {
  min-height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
}

.buttonglow .glowing-btn {
  position: relative;
  color: var(--glow-color);
  cursor: pointer;
  padding: 0.35em 1em;
  border: 0.15em solid var(--glow-color);
  border-radius: 0.45em;
  background: none;
  perspective: 2em;
  font-family: "Raleway", sans-serif;
  font-size: 2em;
  font-weight: 900;
  letter-spacing: 1em;

  -webkit-box-shadow: inset 0px 0px 0.5em 0px var(--glow-color),
    0px 0px 0.5em 0px var(--glow-color);
  -moz-box-shadow: inset 0px 0px 0.5em 0px var(--glow-color),
    0px 0px 0.5em 0px var(--glow-color);
  box-shadow: inset 0px 0px 0.5em 0px var(--glow-color),
    0px 0px 0.5em 0px var(--glow-color);
  animation: border-flicker 2s linear infinite;
}

.buttonglow .glowing-txt {
  float: left;
  margin-right: -0.8em;
  -webkit-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3),
    0 0 0.45em var(--glow-color);
  -moz-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3),
    0 0 0.45em var(--glow-color);
  text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em var(--glow-color);
  animation: text-flicker 3s linear infinite;
}

.buttonglow .faulty-letter {
  opacity: 0.5;
  animation: faulty-flicker 2s linear infinite;
}

.buttonglow .glowing-btn::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0.7;
  filter: blur(1em);
  transform: translateY(120%) rotateX(95deg) scale(1, 0.35);
  background: var(--glow-color);
  pointer-events: none;
}

.buttonglow .glowing-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  z-index: -1;
  background-color: var(--glow-color);
  box-shadow: 0 0 2em 0.2em var(--glow-color);
  transition: opacity 100ms linear;
}

.buttonglow .glowing-btn:hover {
  color: rgba(0, 0, 0, 0.8);
  text-shadow: none;
  animation: none;
}

.buttonglow .glowing-btn:hover .glowing-txt {
  animation: none;
}

.buttonglow .glowing-btn:hover .faulty-letter {
  animation: none;
  text-shadow: none;
  opacity: 1;
}

.buttonglow .glowing-btn:hover:before {
  filter: blur(1.5em);
  opacity: 1;
}

.buttonglow .glowing-btn:hover:after {
  opacity: 1;
}

@keyframes faulty-flicker {
  0% {
    opacity: 0.1;
  }
  2% {
    opacity: 0.1;
  }
  4% {
    opacity: 0.5;
  }
  19% {
    opacity: 0.5;
  }
  21% {
    opacity: 0.1;
  }
  23% {
    opacity: 1;
  }
  80% {
    opacity: 0.5;
  }
  83% {
    opacity: 0.4;
  }

  87% {
    opacity: 1;
  }
}

@keyframes text-flicker {
  0% {
    opacity: 0.1;
  }

  2% {
    opacity: 1;
  }

  8% {
    opacity: 0.1;
  }

  9% {
    opacity: 1;
  }

  12% {
    opacity: 0.1;
  }
  20% {
    opacity: 1;
  }
  25% {
    opacity: 0.3;
  }
  30% {
    opacity: 1;
  }

  70% {
    opacity: 0.7;
  }
  72% {
    opacity: 0.2;
  }

  77% {
    opacity: 0.9;
  }
  100% {
    opacity: 0.9;
  }
}

@keyframes border-flicker {
  0% {
    opacity: 0.1;
  }
  2% {
    opacity: 1;
  }
  4% {
    opacity: 0.1;
  }

  8% {
    opacity: 1;
  }
  70% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

@media only screen and (max-width: 600px) {
 .buttonglow  .glowing-btn{
    font-size: 1em;
  }
}

Hasil

Tampilannya kurang lebih bisa dilihat dibawah ini.

Terima kasih telah mengunjungi website kami.

Share jika bermanfaat, jika ada kritik, tambahan, pertanyaan atau saran silakan hubungi kami atau silakan isi di kolom komentar.