CSS ile Button Hover Glow 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:
- HTML: Butonumuzu HTML koduyla oluşturuyoruz.
- CSS: Butonun normal ve hover stillerini tanımlıyoruz.
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