Бутонът е елемент, върху който може да се кликне и се използва за извършване на конкретно действие. Използвайки CSS, можете да зададете различни стилове на бутони, един от тях е да промените цвета на бутон при щракване. Цветът на бутон може да бъде зададен с помощта на CSS ' :активен ” псевдо-клас.
Този блог ще ви научи на процедурата, свързана с промяна на цвета на бутона при щракване. За целта, първо, научете за псевдо-класа :active.
И така, да започваме!
Какво е „:active“ в CSS?
Промяната на цвета на бутона при щракване в CSS е възможна с помощта на „ :активен ” псевдо-клас. В HTML той показва елемент, който се активира, когато потребителят щракне върху него. Освен това, когато използвате мишка, активирането започва при натискане на клавиша на мишката.
Синтаксис
а : активен {
цвят : зелено ;
}
“ а ” се отнася до HTML елемента, върху който ще бъде приложен класът :active.
Нека се насочим към пример, за да разберем заявената концепция.
Как да промените цвета на бутона при щракване в CSS?
За да промените цвета на бутон при щракване, първо създайте бутон в HTML файл и задайте името на класа „ btn ”.
HTML
< тяло >< бутон клас = 'btn' > Бутон < / бутон >
< / тяло >
След това в CSS задайте цвета на бутона. За да направим това, ще използваме „ .btn “ за достъп до бутона и задаване на цвета на бутона като „ rgb(0, 255, 213) ”.
CSS
.btn {Цвят на фона : rgb ( 0 , 255 , 213 ) ;
}
След това приложете :active псевдоклас върху бутона като „ .btn:активен ” и задайте цвета на бутона, който ще се показва в активно състояние като „ rgb(123, 180, 17) ”:
.btn : активен {Цвят на фона : rgb ( 123 , 180 , 17 ) ;
}
Това ще покаже следния резултат:
Сега нека добавим заглавието с таг
и име на клас бутон ' бутон ”, вътре в тага .
HTML
< център >
< h1 > Промяна на цвета на бутона < / h1 >
< бутон клас = 'бутон' > Щракнете върху мен < / бутон >
< / център >
След това ще преминем към CSS и ще стилизираме бутона и ще приложим :active върху него. За да направим това, ще зададем стила на границата като „ нито един ” и дайте подложка като „ 15px ”. След това задайте цвета на текста на бутона като „ rgb(50, 0, 54) ” и неговия фон като „ rgb(177, 110, 149) “, а неговият радиус като „ 15px ”:
.бутон {
граница : нито един ;
подплата : 15px ;
цвят : rgb ( петдесет , 0 , 54 ) ;
Цвят на фона : rgb ( 177 , 110 , 149 ) ;
граница-радиус : 15px ;
}
Това ще покаже следния резултат:
След това ще приложим :active псевдоклас върху бутона като „ .бутон:активен “ и задайте цвета на бутон като „ rgb(200, 255, 0) ”:
.бутон : активен {
Цвят на фона : rgb ( 200 , 255 , 0 ) ;
}
След като внедрите целия код по-горе, отидете на HTML файла и го изпълнете, за да проверите резултата:
От изхода може да се види, когато се щракне върху бутона, цветът му се променя според посочения RGB цветови код.
Заключение
За да промените цвета на бутона при щракване в CSS, полето „ :активен ” може да се използва псевдоклас. По-конкретно, той може да представлява елемента бутон, когато се активира. Използвайки този клас, можете да зададете различни цветове на бутоните, когато мишката щракне върху него. Тази статия обяснява процедурата за промяна на цвета на бутоните при щракване в CSS.
HTML
< център >< h1 > Промяна на цвета на бутона < / h1 >
< бутон клас = 'бутон' > Щракнете върху мен < / бутон >
< / център >
След това ще преминем към CSS и ще стилизираме бутона и ще приложим :active върху него. За да направим това, ще зададем стила на границата като „ нито един ” и дайте подложка като „ 15px ”. След това задайте цвета на текста на бутона като „ rgb(50, 0, 54) ” и неговия фон като „ rgb(177, 110, 149) “, а неговият радиус като „ 15px ”:
.бутон {граница : нито един ;
подплата : 15px ;
цвят : rgb ( петдесет , 0 , 54 ) ;
Цвят на фона : rgb ( 177 , 110 , 149 ) ;
граница-радиус : 15px ;
}
Това ще покаже следния резултат:
След това ще приложим :active псевдоклас върху бутона като „ .бутон:активен “ и задайте цвета на бутон като „ rgb(200, 255, 0) ”:
.бутон : активен {Цвят на фона : rgb ( 200 , 255 , 0 ) ;
}
След като внедрите целия код по-горе, отидете на HTML файла и го изпълнете, за да проверите резултата:
От изхода може да се види, когато се щракне върху бутона, цветът му се променя според посочения RGB цветови код.
Заключение
За да промените цвета на бутона при щракване в CSS, полето „ :активен ” може да се използва псевдоклас. По-конкретно, той може да представлява елемента бутон, когато се активира. Използвайки този клас, можете да зададете различни цветове на бутоните, когато мишката щракне върху него. Тази статия обяснява процедурата за промяна на цвета на бутоните при щракване в CSS.