Neon Işıklı Buton

16.08.2025 118 indirme HTML/CSS
Ücretsiz

Yanıp sönen neon efektli buton

Canlı Önizleme
Bu önizlemede kod ile etkileşime geçebilirsiniz.
Kod
<style>
.neon-btn {
  position: relative;
  display: inline-block;
  padding: 15px 30px;
  color: #fff;
  letter-spacing: 4px;
  font-size: 24px;
  text-decoration: none;
  overflow: hidden;
  transition: 0.2s;
  background: #000;
  box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80px #2196f3;
cursor:pointer;
  border-radius: 5px;
}

.neon-btn:hover {
  background: #2196f3;
  color: #255784;
  box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80px #2196f3;
}

@keyframes neon-pulse {
  0% {
    box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3;
  }
  50% {
    box-shadow: 0 0 20px #2196f3, 0 0 60px #2196f3;
  }
  100% {
    box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3;
  }
}

.neon-btn {
  animation: neon-pulse 1.5s infinite;
}
</style>

<a type="button" onclick="javascript:void(0)" class="neon-btn">NEON BUTON</a>
Kullanım Talimatları
  1. Yukarıdaki kodu kopyalayın veya indirin
  2. HTML dosyanızın <head> bölümüne CSS kodlarını ekleyin
  3. JavaScript kodları varsa </body> etiketinden önce ekleyin
  4. HTML yapısını istediğiniz yere yerleştirin
  5. Gerekirse CSS sınıflarını projenize uygun şekilde düzenleyin
Kod Bilgileri
118
İndirme
Ücretsiz
Fiyat

16.08.2025 eklendi
Paylaş