Şimdi yükleniyor

CSS ile Button Hover Glow Effect

css-button-hover-effect

Bu makalede, CSS kullanarak bir butona tıklandığında parıltı ( glow ) efekti eklemeyi ele alacağız. Bunu, CSS’nin box-shadow özelliğini kullanarak kolayca yapabiliriz. Burada ki örnekte box-shadow ve text-shadow özelliklerini kullandım.

Gerekli Adımlar:

  1. HTML: Butonumuzu HTML koduyla oluşturuyoruz.
  2. CSS: Butonun normal ve hover stillerini tanımlıyoruz.
  3. box-shadow Özelliği: Hover stilinde, box-shadow özelliğini kullanarak parıltı efekti oluşturuyoruz.

Parıltı ( Glow ) Efekti Oluşturma:

  • box-shadow özelliğinin ilk parametresi, gölgenin yatay ve dikey konumunu belirler.
  • İkinci parametre, gölgenin bulanıklık miktarını belirler.
  • Üçüncü parametre, gölgenin yayılma miktarını belirler.
  • Dördüncü parametre, gölgenin rengini belirler.

Hadi şimdi de örnek kodlara geçelim.

HTML

<button id="btn">
   Mobil Mucit
</button>

CSS

button {
    padding: 10px 20px;
    text-transform: uppercase;
    border-radius: 8px;
    font-size: 17px;
    font-weight: 500;
    color: #ffffff80;
    text-shadow: none;
    background: transparent;
    cursor: pointer;
    box-shadow: transparent;
    border: 1px solid #ffffff80;
    transition: 0.5s ease;
    user-select: none;
}

#btn:hover,
:focus {
    color: #ffffff;
    background: #008cff;
    border: 1px solid #008cff;
    text-shadow: 0 0 5px #ffffff, 
        0 0 10px #ffffff, 
        0 0 20px #ffffff;
    box-shadow: 0 0 5px #008cff, 
        0 0 20px #008cff, 
        0 0 50px #008cff,
        0 0 100px #008cff;
}

Bir Yorum Yazın