Düğme, çeşitli görevleri gerçekleştiren HTML'nin temel bir parçasıdır. CSS kullanarak düğmeyi tasarlayabilir ve biçimlendirebilirsiniz. Düğmeyi tasarlamanın, düğmeyi renklendirme, yeniden boyutlandırma, gezinme ve çok daha fazlası gibi farklı yolları vardır.

Bu yazımızda önce buton oluşturmayı, ardından üzerine gelindiğinde buton rengini değiştirmeyi öğreneceğiz.

Başlayalım!

CSS'de Hover'da Düğme Rengi Nasıl Değiştirilir?

CSS'de, ' :vurgu ”, fareyle üzerine gelindiğinde düğmenin rengini değiştirmek için kullanılır. “ :vurgu ”, bağlantılar, düğmeler, resimler ve daha pek çok öğe gibi HTML öğelerinin fare üzerine gelindiğinde davranışını değiştirmeye izin veren bir sözde sınıftır.

sözdizimi :vurgu aşağıda verilmiştir.

Sözdizimi

Yukarıda sağlanan sözdiziminde, ' a ”, “ öğesinin bulunduğu HTML öğesini ifade eder. :vurgu ” uygulanır. CSS'de, öğenin rengi, boyutu ve genişliği gibi HTML öğelerinin üzerine gelme davranışını ayarlayabilirsiniz.

Adım 1: Div ve Düğme Oluşturun

HTML'de önce bir div oluşturacağız ve

ile bir başlık ve bir etiket kullanarak bir buton ekleyeceğiz. Burada butonun sınıf adını “olarak atayacağız. btn ” ve düğme metni “ üzerimde gezin ”.

HTML

Yukarıda belirtilen kodun sonucu aşağıda verilmiştir. Başlığın ve düğmenin oluşturulduğunu görebilirsiniz:

Şimdi, div'e ve butona tek tek stil vermek için CSS'ye gidin.

2. Adım: Stil Düğmesi ve Div

İlk olarak, oluşturulan kapsayıcıyı “ kullanarak şekillendireceğiz. div ”. Ardından, div'in yüksekliğini “ olarak ayarlayacağız. 250 piksel ” ve arka plan rengi “ rgb(199, 173, 192) ”. Ayrıca div'in kenarlığını ayarlamak için border özelliğini kullanacağız, genişliği “ 5 piksel ”, stil olarak “ sağlam ” ve renk olarak “ rgb(40, 2, 55) ”.

CSS

Aşağıda verilen çıktı, eklenen stilin div'e başarıyla uygulandığını gösterir:

Bir sonraki adımda, CSS kullanarak butona stil vereceğiz.

Şimdi düğmeyi “ kullanarak şekillendireceğiz. .btn ” HTML'de oluşturulan düğmeye erişmek için. Bundan sonra, “ ayarlayarak düğmenin kenarlığını gizleyeceğiz. Yok ” sınır özellik değeri olarak. Bundan sonra yazı tipi boyutunu “ büyük ” ve düğmenin dolgusu “ 10 piksel ” butonun içeriği ile butonun kenarlığı arasında boşluklar oluşturmak için. Sonunda, metnin ve arka planın rengini “ olarak ayarlayacağız. rgb(50, 0, 54) ' ve ' rgb(193, 54, 135) ”:

Düğme şimdi biçimlendi:

Ayrıca, uygulayacağız” :vurgu ” üzerine gelindiğinde bir düğmenin rengini değiştirmek için.

Adım 3: Vurguluyken Düğme Rengini Değiştirin

Şimdi kullanacağız “ .btn: fareyle üzerine gelin ” düğmeyi vurgulu sözde sınıf öğesiyle bağlamak için. Sonuç olarak, fareyle üzerine gelme butona uygulanacaktır. Ardından butonun arka plan rengini ve yazı rengini “ olarak ayarlayacağız. rgb(66, 2, 41) ' ve ' rgb(119, 255, 0) ”. Bu renkler, fare üzerine gelindiğinde düğmeye uygulanacaktır:

Aşağıda verilen çıktıda, fare üzerine gelindiğinde düğmenin renginin değiştiğini görebilirsiniz:

Bu kadar! Fareyle üzerine gelindiğinde düğme rengini değiştirme yöntemini CSS kullanarak açıkladık.

Çözüm

Fareyle üzerine gelindiğinde bir düğmenin rengini değiştirmek için “ :vurgu ” sözde sınıf elemanı kullanılır. Bunu yapmak için, düğmeyi :hover ile bağlayın ve üzerine geldiğimizde değişecek olan düğmenin rengini ayarlayın. Bu yazımızda fareyle üzerine gelindiğinde buton rengini değiştirme yöntemini anlattık ve bir örnek verdik.