Düğme, belirli bir eylemi gerçekleştirmek için kullanılan tıklanabilir bir öğedir. CSS kullanarak, farklı düğme stilleri ayarlayabilirsiniz, bunlardan biri tıklamada bir düğmenin rengini değiştirmektir. Bir düğmenin rengi CSS kullanılarak ayarlanabilir ' :aktif 'sözde sınıf.
Bu blog, tıklamada düğme rengini değiştirme ile ilgili prosedürü size öğretecektir. Bunun için öncelikle :active sözde sınıfı hakkında bilgi edinin.
Öyleyse başlayalım!
CSS'de “:active” nedir?
CSS'de tıklandığında düğme rengini değiştirmek “ :aktif 'sözde sınıf. HTML'de, kullanıcı tıkladığında etkinleştirilen bir öğeyi belirtir. Ayrıca, bir fare kullanırken, fare tuşuna basıldığında etkinleştirme başlar.
Sözdizimi
a : aktif {
renk : Yeşil ;
}
“ a ”, :active sınıfının uygulanacağı HTML öğesini ifade eder.
Belirtilen kavramı anlamak için bir örneğe gidelim.
CSS'de Tıklamada Düğme Rengi Nasıl Değiştirilir?
Tıklamada bir düğmenin rengini değiştirmek için, önce bir HTML dosyasında bir düğme oluşturun ve sınıf adını atayın “ btn ”.
HTML
< gövde >< buton sınıf = 'btn' > Buton < / buton >
< / gövde >
Ardından, CSS'de düğmenin rengini ayarlayın. Bunu yapmak için kullanacağız “ .btn ” butona erişmek ve butonun rengini “ olarak ayarlamak için rgb(0, 255, 213) ”.
CSS
.btn {arka plan rengi : rgb ( 0 , 255 , 213 ) ;
}
Bundan sonra, butona :active sözde sınıfını “ olarak uygulayın. .btn:etkin ” ve aktif durumda görünecek düğmenin rengini “ olarak ayarlayın. rgb(123, 180, 17) ”:
.btn : aktif {arka plan rengi : rgb ( 123 , 180 , 17 ) ;
}
Bu, aşağıdaki sonucu gösterecektir:
Şimdi
tagı ve button class name ile başlığı ekleyelim. buton ”, etiketinin içinde.
HTML
< merkez >
< h1 > Düğme rengini değiştir < / h1 >
< buton sınıf = 'buton' > Beni tıkla < / buton >
< / merkez >
Ardından, CSS'ye geçeceğiz ve butona stil uygulayacağız ve üzerine :active uygulayacağız. Bunu yapmak için kenarlık stilini “olarak ayarlayacağız. Yok ” ve dolguyu “ olarak verin 15 piksel ”. Bundan sonra, düğme metninin rengini “ olarak ayarlayın. rgb(50, 0, 54) ” ve arka planı “ rgb(177, 110, 149) ” ve yarıçapı “ 15 piksel ”:
.buton {
sınır : Yok ;
dolgu malzemesi : 15 piksel ;
renk : rgb ( elli , 0 , 54 ) ;
arka plan rengi : rgb ( 177 , 110 , 149 ) ;
sınır yarıçapı : 15 piksel ;
}
Bu, aşağıdaki sonucu gösterecektir:
Daha sonra butona :active sözde sınıfı “ olarak uygulayacağız. .düğme:etkin ” ve bir düğmenin rengini “ olarak ayarlayın. rgb(200, 255, 0) ”:
.buton : aktif {
arka plan rengi : rgb ( 200 , 255 , 0 ) ;
}
Yukarıdaki kodun tamamını uyguladıktan sonra, HTML dosyasına gidin ve sonucu kontrol etmek için onu çalıştırın:
Çıktıdan butona tıklandığında renginin belirtilen RGB renk koduna göre değiştiği görülmektedir.
Çözüm
CSS'de tıklandığında düğme rengini değiştirmek için “ :aktif ” sözde sınıf kullanılabilir. Daha spesifik olarak, etkinleştirildiğinde düğme öğesini temsil edebilir. Bu sınıfı kullanarak, fare tıkladığında farklı düğme renkleri ayarlayabilirsiniz. Bu makale, CSS'de tıklandığında düğme rengini değiştirme prosedürünü açıklamaktadır.
HTML
< merkez >< h1 > Düğme rengini değiştir < / h1 >
< buton sınıf = 'buton' > Beni tıkla < / buton >
< / merkez >
Ardından, CSS'ye geçeceğiz ve butona stil uygulayacağız ve üzerine :active uygulayacağız. Bunu yapmak için kenarlık stilini “olarak ayarlayacağız. Yok ” ve dolguyu “ olarak verin 15 piksel ”. Bundan sonra, düğme metninin rengini “ olarak ayarlayın. rgb(50, 0, 54) ” ve arka planı “ rgb(177, 110, 149) ” ve yarıçapı “ 15 piksel ”:
.buton {sınır : Yok ;
dolgu malzemesi : 15 piksel ;
renk : rgb ( elli , 0 , 54 ) ;
arka plan rengi : rgb ( 177 , 110 , 149 ) ;
sınır yarıçapı : 15 piksel ;
}
Bu, aşağıdaki sonucu gösterecektir:
Daha sonra butona :active sözde sınıfı “ olarak uygulayacağız. .düğme:etkin ” ve bir düğmenin rengini “ olarak ayarlayın. rgb(200, 255, 0) ”:
.buton : aktif {arka plan rengi : rgb ( 200 , 255 , 0 ) ;
}
Yukarıdaki kodun tamamını uyguladıktan sonra, HTML dosyasına gidin ve sonucu kontrol etmek için onu çalıştırın:
Çıktıdan butona tıklandığında renginin belirtilen RGB renk koduna göre değiştiği görülmektedir.
Çözüm
CSS'de tıklandığında düğme rengini değiştirmek için “ :aktif ” sözde sınıf kullanılabilir. Daha spesifik olarak, etkinleştirildiğinde düğme öğesini temsil edebilir. Bu sınıfı kullanarak, fare tıkladığında farklı düğme renkleri ayarlayabilirsiniz. Bu makale, CSS'de tıklandığında düğme rengini değiştirme prosedürünü açıklamaktadır.