Membuat Neon Button Animation HTML CSS

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

HTML, singkatan dari HyperText Markup Language, adalah bahasa markup yang digunakan untuk membuat struktur dasar halaman web. Dikembangkan oleh Tim Berners-Lee pada tahun 1991, HTML menggunakan serangkaian “tags” untuk menentukan elemen-elemen seperti teks, gambar, dan tautan dalam halaman. Tag ini membentuk hierarki, memberikan dasar untuk bagaimana konten disusun di dalam dokumen HTML. Sebagai contoh, tag <head> berisi informasi tentang dokumen, seperti judul halaman, sedangkan tag <body> mengandung konten utama.

CSS, atau Cascading Style Sheets, adalah bahasa gaya yang digunakan untuk mempercantik dan memformat halaman web yang dibangun dengan HTML. Dengan CSS, pengembang dapat mengontrol tata letak, warna, dan gaya elemen HTML. Ini memisahkan presentasi dari struktur, memungkinkan perubahan gaya tanpa memengaruhi struktur dasar halaman.

CSS bekerja dengan aturan-aturan yang menghubungkan selektor (elemen yang akan diubah gayanya) dengan properti (cara elemen tersebut akan diubah). Misalnya, aturan CSS dapat mengubah font dan warna teks pada semua paragraf dalam halaman web. CSS juga mendukung responsivitas, memungkinkan desainer menyesuaikan tampilan halaman untuk berbagai perangkat, dari komputer desktop hingga ponsel pintar.

HTML dan CSS bekerja bersama untuk menciptakan pengalaman pengguna yang kaya dan estetis. HTML menyediakan struktur dan konten dasar, sementara CSS menangani presentasi. Dengan perkembangan HTML5 dan CSS3, pengembang dapat memanfaatkan fitur-fitur baru untuk meningkatkan kreativitas dan fungsionalitas halaman web, menjadikan kombinasi keduanya sebagai fondasi utama pengembangan web modern.

NB: kami menggunakan tambahan CSS dari bootstrap.

Membuat Neon Button 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="neonbutton">
	<a href="#">
	  <span></span>
	  <span></span>
	  <span></span>
	  <span></span>
	  neon button
	</a>
</div>
</div>

Style CSS

@import url("https://teknologi.visitklaten.com/cloudme.fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap");

.neonbutton {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  background: #050801;
  font-family: "Raleway", sans-serif;
  font-weight: bold;
}
.neonbutton a {
  position: relative;
  display: inline-block;
  padding: 25px 30px;
  margin: 40px 0;
  color: #03e9f4;
  text-decoration: none;
  text-transform: uppercase;
  transition: 0.5s;
  letter-spacing: 4px;
  overflow: hidden;
}
.neonbutton a:hover {
  background: #03e9f4;
  color: #050801;
  box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4,
    0 0 200px #03e9f4;
  -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
}
.neonbutton a:nth-child(1) {
  filter: hue-rotate(270deg);
}
.neonbutton a:nth-child(2) {
  filter: hue-rotate(110deg);
}
.neonbutton a span {
  position: absolute;
  display: block;
}
.neonbutton a span:nth-child(1) {
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #03e9f4);
  animation: animate1 1s linear infinite;
}
@keyframes animate1 {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 100%;
  }
}
.neonbutton a span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #03e9f4);
  animation: animate2 1s linear infinite;
  animation-delay: 0.25s;
}
@keyframes animate2 {
  0% {
    top: -100%;
  }
  50%,
  100% {
    top: 100%;
  }
}
.neonbutton a span:nth-child(3) {
  bottom: 0;
  right: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #03e9f4);
  animation: animate3 1s linear infinite;
  animation-delay: 0.5s;
}
@keyframes animate3 {
  0% {
    right: -100%;
  }
  50%,
  100% {
    right: 100%;
  }
}
.neonbutton a span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #03e9f4);
  animation: animate4 1s linear infinite;
  animation-delay: 0.75s;
}
@keyframes animate4 {
  0% {
    bottom: -100%;
  }
  50%,
  100% {
    bottom: 100%;
  }
}

Hasil

Tampilannya kurang lebih bisa dilihat dibawah ini. Silakan hover atau arahkan kursor ke tombol neon button.

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.