Как изменить цвет кнопки при наведении в CSS?

Kak Izmenit Cvet Knopki Pri Navedenii V Css



Кнопка — это фундаментальная часть HTML, которая выполняет различные задачи. Используя CSS, вы можете спроектировать и стилизовать кнопку. Существуют различные способы оформления кнопки, такие как окрашивание кнопки, изменение размера, наведение курсора мыши и многое другое.

В этой статье мы сначала узнаем, как создать кнопку, а затем изменим цвет кнопки при наведении.







Давайте начнем!



Как изменить цвет кнопки при наведении в CSS?

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



Синтаксис :наведите приведен ниже.





Синтаксис



В приведенном выше синтаксисе « а ” относится к элементу HTML, где “ :наведите ' применены. В CSS вы можете установить поведение HTML-элементов при наведении, например цвет, размер и ширину элемента.

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

В HTML сначала мы создадим div и добавим заголовок с

и кнопку с помощью тега. Здесь мы назначим имя класса кнопки как « бтн ', а текст кнопки как ' Наведите на меня ».

HTML



Результат вышеупомянутого кода приведен ниже. Вы можете видеть, что заголовок и кнопка созданы:

Теперь перейдите к CSS, чтобы стилизовать div и кнопку одну за другой.

Шаг 2: Стиль кнопки и Div

Во-первых, мы стилизуем созданный контейнер, используя « див ». Затем мы установим высоту div как « 250 пикселей ” и цвет фона как “ RGB(199, 173, 192) ». Мы также будем использовать свойство границы для настройки границы div, ширина как « 5 пикселей », стиль как « твердый ', а цвет как ' RGB(40, 2, 55) ».

CSS

Приведенный ниже вывод показывает, что добавленный стиль успешно применен к div:

На следующем шаге мы стилизуем кнопку с помощью CSS.

Теперь мы стилизуем кнопку, используя « .btn », чтобы получить доступ к кнопке, созданной в HTML. После этого мы скроем границу кнопки, установив « никто ” в качестве значения свойства границы. После этого мы настроим размер шрифта на « большой ' и дополнение кнопки к ' 10 пикселей », чтобы создать пробелы между содержимым кнопки и границей кнопки. В конце мы установим цвет текста и фона как « RGB(50, 0, 54) ' а также ' RGB(193, 54, 135) ”:

Кнопка теперь оформлена:

Далее будем применять « :наведите », чтобы изменить цвет кнопки при наведении.

Шаг 3: Изменить цвет кнопки при наведении

Теперь мы будем использовать « .btn: наведите », чтобы связать кнопку с элементом псевдокласса hover. В результате на кнопку будет применено наведение. Далее мы установим цвет фона и цвет текста кнопки как « RGB(66, 2, 41) ' а также ' RGB(119, 255, 0) ». Эти цвета будут применяться к кнопке при наведении на нее курсора мыши:

В представленном ниже выводе вы можете видеть, что цвет кнопки меняется при наведении на нее курсора мыши:

Вот и все! Мы объяснили способ изменения цвета кнопки при наведении с помощью CSS.

Вывод

Чтобы изменить цвет кнопки при наведении, « :наведите ” используется элемент псевдокласса. Для этого свяжите кнопку с :hover и установите цвет кнопки, который будет меняться при наведении на нее курсора. В этой статье мы объяснили способ изменения цвета кнопки при наведении и привели пример.