Дугме је основни део ХТМЛ-а који обавља различите задатке. Користећи ЦСС, можете дизајнирати и стилизирати дугме. Постоје различити начини за дизајн дугмета, као што су бојење дугмета, промена величине, лебдење и још много тога.
У овом чланку ћемо прво научити како да креирамо дугме, а затим да променимо боју дугмета при лебдењу.
Хајде да почнемо!
Како променити боју дугмета при лебдењу у ЦСС-у?
У ЦСС-у, “ :лебдети ” се користи за промену боје дугмета при лебдењу. “ :лебдети ” је псеудо-класа која омогућава промену понашања ХТМЛ елемената када пређете мишем преко ње, као што су елементи као што су везе, дугмад, слике и још много тога.
Синтакса оф :лебдети је дато у наставку.
Синтакса
У горе наведеној синтакси, „ а ” се односи на ХТМЛ елемент где је „ :лебдети ' се примењује. У ЦСС-у можете подесити понашање лебдења ХТМЛ елемената, као што су боја, величина и ширина елемента.
Корак 1: Креирајте Див и дугме
У ХТМЛ-у, прво ћемо креирати див и додати наслов са <х1> и дугме помоћу ознаке. Овде ћемо доделити назив класе дугмету као „ бтн ” и текст дугмета као „ Лебди на мени ”.
ХТМЛ
Исход горе поменутог кода је дат у наставку. Можете видети да су наслов и дугме направљени:
Сада пређите на ЦСС да бисте стилизовали див и дугме једно по једно.
Корак 2: Дугме за стил и Див
Прво ћемо стилизовати креирани контејнер користећи „ див ”. Затим ћемо поставити висину дива као „ 250пк ” и боја позадине као „ ргб(199, 173, 192) ”. Такође ћемо користити својство границе да прилагодимо ивицу див, ширину као „ 5пк ”, стилизован као „ чврст “, и боју као „ ргб(40, 2, 55) ”.
ЦСС
Доле дати излаз показује да је додати стил успешно примењен на див:
У следећем кораку ћемо стилизовати дугме користећи ЦСС.
Сада ћемо стилизовати дугме користећи „ .бтн ” да бисте приступили дугмету које је креирано у ХТМЛ-у. Након тога, сакрићемо ивицу дугмета тако што ћемо поставити „ ниједан ” као вредност својства границе. Након тога, прилагодићемо величину фонта на „ велики ” и допуна дугмета на „ 10пк ” да бисте направили размаке између садржаја дугмета и ивице дугмета. На крају ћемо поставити боју текста и позадине као „ ргб(50, 0, 54) ' и ' ргб(193, 54, 135) ”:
Дугме је сада стилизовано:
Даље, применићемо „ :лебдети ” да бисте променили боју дугмета при лебдењу.
Корак 3: Промените боју дугмета при лебдењу
Сада ћемо користити „ .бтн:ховер ” да повежете дугме са елементом псеудокласе при лебдењу. Као резултат тога, курсор ће бити примењен на дугме. Затим ћемо поставити боју позадине и боју текста дугмета као „ ргб(66, 2, 41) ' и ' ргб(119, 255, 0) ”. Ове боје ће се применити на дугме када пређете мишем преко њега:
У доле наведеном излазу, можете видети да се боја дугмета мења када миш пређе на њега:
То је то! Објаснили смо метод за промену боје дугмета при лебдењу помоћу ЦСС-а.
Закључак
Да бисте променили боју дугмета при лебдењу, „ :лебдети ” се користи елемент псеудо-класе. Да бисте то урадили, повежите дугме са :ховер и подесите боју дугмета, која ће се променити када задржите показивач миша на њему. У овом чланку смо објаснили метод за промену боје дугмета при лебдењу и навели пример тога.