Canlı Önizleme
Nasıl Kullanılır?
Yalnızca CSS ile oluşturulmuş mükemmel neon efekti. A (Link) elementi veya herhangi bir Button elementi ile kullanılabilir.
Kaynak Kodlar
HTML
<a href="#" class="glowing-btn">
<span>Neon Buton</span>
</a>CSS
.glowing-btn { display: inline-block; position: relative; padding: 15px 30px; font-size: 18px; color: #00cec9; text-decoration: none; overflow: hidden; transition: 0.2s; font-family: 'Inter', sans-serif; font-weight: bold; background: #1a1a24; border-radius: 5px; }
.glowing-btn:hover { color: #1a1a24; background: #00cec9; box-shadow: 0 0 10px #00cec9, 0 0 40px #00cec9, 0 0 80px #00cec9; }
.glowing-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #00cec9); animation: btn-anim1 2s linear infinite; }
@keyframes btn-anim1 { 0% { left: -100%; } 50%, 100% { left: 100%; } }
.glowing-btn::after { content: ''; position: absolute; bottom: 0; right: -100%; width: 100%; height: 2px; background: linear-gradient(270deg, transparent, #00cec9); animation: btn-anim3 2s linear infinite; animation-delay: 1s; }
@keyframes btn-anim3 { 0% { right: -100%; } 50%, 100% { right: 100%; } }