Web tasarımda dikkat çekici butonlar, kullanıcı deneyimini güçlendirmenin en kolay yollarından biridir. Özellikle neon ışık efekti son dönemlerde oldukça popüler hale geldi. Karanlık arka planlarda öne çıkan parlak butonlar, hem modern hem de enerjik bir görünüm sağlar.

Bu yazıda, Elementor kullanarak nasıl neon ışıklı bir buton oluşturabileceğinizi adım adım anlatacağım. Elementor Pro kullanıcıları Custom CSS alanını kullanarak, ücretsiz sürüm kullanıcıları ise WordPress Özelleştir > Ek CSS bölümünden aynı sonuca ulaşabilir.

1. Karanlık Arka Plan Oluşturma

Neon efektin en iyi göründüğü yer koyu arka planlardır. Bunun için:

• Elementor’da yeni bir section ekleyin.
• Stil > Arka Plan kısmına gelerek koyu bir renk seçin (ör. siyah veya koyu gri).

2. Buton Ekleme ve Hazırlık

• Sayfaya bir Button (Buton) widget’ı sürükleyip bırakın.
• Buton metnini örneğin “Neon” olarak yazın.
• Butonu ortalayın.
• Stil > Arka Plan kısmında arka plan rengini şeffaf yapın.
• Kenarlık > Tip kısmını Solid (Düz) yaparak kenarlığı 2-4px kalınlığında ayarlayın.
• Kenarlık ve yazı rengini parlak bir neon rengine (ör. #FF00D5) getirin.

3. Tipografi ve Tasarım Ayarları

• Yazı Tipi Boyutu: 22px
• Yazı Kalınlığı: 600 (Bold)
• Harf Aralığı: 2px
• Padding: Üst/Alt 18-20px, Sağ/Sol 35-40px
• Köşe Yuvarlama: 10px

Bu ayarlar butonun daha dengeli görünmesini sağlar.

4. Neon Efektini Eklemek (CSS Kodları)

Şimdi sıra geldi asıl efekti eklemeye. Elementor Pro kullanıyorsanız Gelişmiş > Custom CSS kısmına aşağıdaki kodları yapıştırın.

Neon Parlaması:

selector{
    --color: #FF00D5;
}

/* NEON PPARLAMASI*/
selector a{
    text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em var(--color);
    box-shadow: inset 0 0 0.5em 0 var(--color), 0 0 0.5em 0 var(--color);
    transition: box-shadow 2s !important;
    position: relative;
}
Code language: CSS (css)

Hover Parlama Efekti:

/* HOVER PARLAMA EFEKTİ */
selector a::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0 0 2em 0.5em var(--color);
    opacity: 0;
    transition: opacity 100ms linear;
}
selector a:hover::after{
    opacity: 1;
}
Code language: CSS (css)

Buton Yansıma:

/* BUTON YANSIMA */
selector a::before {
  pointer-events: none;
  content: "";
  position: absolute;
  background: var(--color);
  top: 130%;
  left: 0;
  width: 100%;
  height: 100%;
  transform: perspective(15em) rotateX(40deg) scale(1, 0.35);
  filter: blur(2em);
  opacity: 0.7;
}
selector a:hover::before {
  opacity: 1;
}
Code language: CSS (css)

Kodun içinde hem normal durumda neon parlaması hem de hover (üzerine gelme) sırasında ekstra bir glow eklenmiştir. Ayrıca butonun altında yansıma efekti ile daha gerçekçi bir neon görünüm elde edersiniz.

Eğer ücretsiz sürümdeyseniz WordPress panelinden Görünüm > Özelleştir > Ek CSS kısmına eklemeniz gerekir.

⚡ Dikkat: Aşağıdaki kodu kullanabilmek için butona özel bir sınıf ekleyin.
Elementor’da Gelişmiş > CSS Sınıfı kısmına “my-neon-button” yazın.

.my-neon-button {
    --color: #FF00D5;
}

/* Neon parlama */
.my-neon-button a {
    text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em var(--color);
    box-shadow: inset 0 0 0.5em 0 var(--color), 0 0 0.5em 0 var(--color);
    transition: box-shadow 2s !important;
    position: relative;
}

/* Hover parlama efekti */
.my-neon-button a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0 0 2em 0.5em var(--color);
    opacity: 0;
    transition: opacity 100ms linear;
}
.my-neon-button a:hover::after {
    opacity: 1;
}

/* Buton yansıması */
.my-neon-button a::before {
    pointer-events: none;
    content: "";
    position: absolute;
    background: var(--color);
    top: 140%;
    left: 0;
    width: 100%;
    height: 100%;
    transform: perspective(15em) rotateX(40deg) scale(1, 0.35);
    filter: blur(2em);
    opacity: 0.7;
}
.my-neon-button a:hover::before {
    opacity: 1;
}
Code language: CSS (css)

Hover Efekti ile Canlılık Katın

Kodun içinde hem normal durumda neon parlaması hem de hover (üzerine gelme) sırasında ekstra bir glow eklenmiştir. Ayrıca butonun altında yansıma efekti ile daha gerçekçi bir neon görünüm elde edersiniz.

Bu adımları uyguladığınızda, sitenizde göz alıcı ve modern bir neon buton hover efekti oluşturabilirsiniz. Üstelik renk kodlarını değiştirerek istediğiniz tonlarda (yeşil, mavi, turuncu) neon butonlar tasarlayabilirsiniz.

Karanlık tema kullanan siteler için bu efekt, ziyaretçilerinizin dikkatini çekmek ve aksiyon almalarını sağlamak için harika bir yöntemdir.