Дугме је елемент на који се може кликнути и који се користи за обављање одређене радње. Користећи ЦСС, можете подесити различите стилове дугмади, један од њих је промена боје дугмета на клик. Боја дугмета се може подесити помоћу ЦСС-а “ :ацтиве ” псеудо-класа.
Овај блог ће вас научити процедури која се односи на промену боје дугмета на клик. За ово, прво, научите о :ацтиве псеудо-класи.
Дакле, почнимо!
Шта је „:ацтиве“ у ЦСС-у?
Промена боје дугмета на клик у ЦСС-у је могућа уз помоћ „ :ацтиве ” псеудо-класа. У ХТМЛ-у означава елемент који се активира када корисник кликне на њега. Штавише, када користите миш, активација почиње када се притисне тастер миша.
Синтакса
а : активан {
боја : зелен ;
}
“ а ” се односи на ХТМЛ елемент на који ће бити примењена класа :ацтиве.
Идемо према примеру да бисмо разумели наведени концепт.
Како променити боју дугмета на клик у ЦСС-у?
Да бисте променили боју дугмета на клик, прво креирајте дугме у ХТМЛ датотеци и доделите назив класе „ бтн ”.
ХТМЛ
< тело >< дугме класа = 'бтн' > Дугме < / дугме >
< / тело >
Затим, у ЦСС-у, подесите боју дугмета. Да бисмо то урадили, користићемо „ .бтн ” да бисте приступили дугмету и поставили боју дугмета као „ ргб(0, 255, 213) ”.
ЦСС
.бтн {боја позадине : ргб ( 0 , 255 , 213 ) ;
}
Након тога, примените :ацтиве псеудо-класу на дугме као „ .бтн:ацтиве ” и подесите боју дугмета које ће се приказивати у свом активном стању као „ ргб(123, 180, 17) ”:
.бтн : активан {боја позадине : ргб ( 123 , 180 , 17 ) ;
}
Ово ће показати следећи резултат:
Сада, додајмо наслов са ознаком <х1> и именом класе дугмета “ дугме ”, унутар ознаке <центер>.
ХТМЛ
< центар >< х1 > Промените боју дугмета < / х1 >
< дугме класа = 'дугме' > Кликни ме < / дугме >
< / центар >
Затим ћемо прећи на ЦСС и стилизирати дугме и применити :ацтиве на њега. Да бисмо то урадили, поставићемо стил ивице као „ ниједан ” и дајте допуну као „ 15пк ”. Након тога, подесите боју текста дугмета као „ ргб(50, 0, 54) ” и његову позадину као „ ргб(177, 110, 149) “, а његов радијус као “ 15пк ”:
.дугме {граница : ниједан ;
паддинг : 15пк ;
боја : ргб ( педесет , 0 , 54 ) ;
боја позадине : ргб ( 177 , 110 , 149 ) ;
граница-радијус : 15пк ;
}
Ово ће показати следећи резултат:
Након тога, применићемо :ацтиве псеудо-класу на дугме као „ .буттон:активан ” и подесите боју дугмета као „ ргб(200, 255, 0) ”:
.дугме : активан {боја позадине : ргб ( 200 , 255 , 0 ) ;
}
Када имплементирате сав горњи код, идите на ХТМЛ датотеку и извршите је да бисте проверили резултат:
Из излаза се може видети када се кликне на дугме, његова боја се мења у складу са наведеним РГБ кодом боје.
Закључак
Да бисте променили боју дугмета на клик у ЦСС-у, „ :ацтиве ” може се користити псеудо-класа. Тачније, може представљати елемент дугмета када се активира. Користећи ову класу, можете поставити различите боје дугмета када миш кликне на њега. Овај чланак је објаснио процедуру промене боје дугмета на клик у ЦСС-у.