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.
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.

https://www.youtube.com/watch?v=YR9qaq-F6DQ

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;
}

/* 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;
}

/* 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;
}