Бутонът е основна част от HTML, която изпълнява различни задачи. С помощта на CSS можете да проектирате и стилизирате бутона. Има различни начини за проектиране на бутона, като оцветяване на бутона, преоразмеряване, задържане и много други.

В тази статия първо ще научим как да създадем бутон, след което ще променим цвета на бутон при задържане.

Да започваме!

Как да промените цвета на бутоните при задържане на курсора на мишката в CSS?

В CSS, „ :задръжте ” се използва за промяна на цвета на бутона при задържане. “ :задръжте ” е псевдо-клас, който позволява промяна на поведението на HTML елементите, когато мишката върху него, като елементи като връзки, бутони, изображения и много други.

Синтаксисът на :задръжте е предоставено по-долу.

Синтаксис

В посочения по-горе синтаксис „ а ” се отнася до HTML елемента, където „ :задръжте ' приложено е. В CSS можете да зададете поведението на курсора на мишката върху HTML елементите, като цвета, размера и ширината на елемента.

Стъпка 1: Създайте Div и бутон

В HTML първо ще създадем div и ще добавим заглавие с

и бутон с помощта на таг. Тук ще присвоим името на класа на бутона като „ btn “ и текстът на бутона като „ Легни върху мен ”.

HTML

Резултатът от гореспоменатия код е даден по-долу. Можете да видите, че заглавието и бутонът са създадени:

Сега преминете към CSS, за да стилизирате div и бутона един по един.

Стъпка 2: Бутон за стил и Div

Първо ще стилизираме създадения контейнер, като използваме „ див ”. След това ще зададем височината на div като ' 250 пиксела ” и цвета на фона като „ rgb(199, 173, 192) ”. Ще използваме също свойството border, за да коригираме границата на div, ширината като „ 5px “, стил като „ твърдо “, и цвят като „ rgb(40, 2, 55) ”.

CSS

Даденият по-долу изход показва, че добавеният стил е успешно приложен към div:

В следващата стъпка ще стилизираме бутона с помощта на CSS.

Сега ще стилизираме бутона с помощта на „ .btn ” за достъп до бутона, който е създаден в HTML. След това ще скрием рамката на бутона, като зададем „ нито един ” като стойност на граничния имот. След това ще коригираме размера на шрифта на „ голям ” и подпълването на бутона до „ 10px ”, за да създадете интервали между съдържанието на бутона и границата на бутона. В крайна сметка ще зададем цвета на текста и фона като „ rgb(50, 0, 54) ' и ' rgb(193, 54, 135) ”:

Бутонът вече е стилизиран:

Освен това ще приложим ' :задръжте ”, за да промените цвета на бутон при задържане.

Стъпка 3: Променете цвета на бутона при задържане

Сега ще използваме „ .btn:задръжте ”, за да свържете бутона с псевдокласовия елемент на курсора. В резултат на това върху бутона ще бъде приложено задържане на мишката. След това ще зададем цвета на фона и цвета на текста на бутона като „ rgb(66, 2, 41) ' и ' rgb(119, 255, 0) ”. Тези цветове ще бъдат приложени към бутона, когато поставите мишката върху него:

В дадения по-долу изход можете да видите, че цветът на бутона се променя, когато мишката се задържи върху него:

Това е! Обяснихме метода за промяна на цвета на бутона при задържане с помощта на CSS.

Заключение

За да промените цвета на бутон при задържане, „ :задръжте ” се използва псевдокласов елемент. За да направите това, свържете бутона с :hover и задайте цвета на бутона, който ще се променя, когато задържим върху него. В тази статия обяснихме метода за промяна на цвета на бутона при задържане и предоставихме пример за това.