Кнопка — это фундаментальная часть 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 и установите цвет кнопки, который будет меняться при наведении на нее курсора. В этой статье мы объяснили способ изменения цвета кнопки при наведении и привели пример.