Кнопка — это кликабельный элемент, используемый для выполнения определенного действия. Используя CSS, вы можете установить различные стили кнопок, один из которых — изменить цвет кнопки при нажатии. Цвет кнопки можно задать с помощью CSS. : активный псевдокласс.
Этот блог научит вас процедуре, связанной с изменением цвета кнопки при нажатии. Для этого, во-первых, узнайте о псевдоклассе :active.
Итак, начнем!
Что такое «:active» в CSS?
Изменение цвета кнопки при клике в CSS возможно с помощью « : активный псевдокласс. В HTML он указывает на элемент, который активируется, когда пользователь нажимает на него. Более того, при использовании мыши активация начинается при нажатии клавиши мыши.
Синтаксис
а : активный {
цвет : зеленый ;
}
“ а ” относится к элементу HTML, к которому будет применен класс :active.
Давайте обратимся к примеру, чтобы понять изложенную концепцию.
Как изменить цвет кнопки при нажатии в CSS?
Чтобы изменить цвет кнопки при нажатии, сначала создайте кнопку в файле HTML и назначьте имя класса « бтн ».
HTML
< тело >< кнопка учебный класс знак равно 'кнопка' > Кнопка < / кнопка >
< / тело >
Далее в 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. Для этого мы установим стиль границы как « никто » и укажите отступы как « 15 пикселей ». После этого установите цвет текста кнопки как « RGB(50, 0, 54) ” и его фон как “ RGB(177, 110, 149) », а его радиус как « 15 пикселей ”:
.кнопка {
граница : никто ;
набивка : 15 пикселей ;
цвет : RGB ( 50 , 0 , 54 ) ;
фоновый цвет : RGB ( 177 , 110 , 149 ) ;
радиус границы : 15 пикселей ;
}
Это покажет следующий результат:
После этого мы применим псевдокласс :active к кнопке как « .кнопка: активная ” и установите цвет кнопки как “ RGB(200, 255, 0) ”:
.кнопка : активный {
фоновый цвет : RGB ( 200 , 255 , 0 ) ;
}
После того, как вы реализуете весь приведенный выше код, перейдите к файлу HTML и выполните его, чтобы проверить результат:
Из вывода видно, что при нажатии кнопки ее цвет изменяется в соответствии с указанным цветовым кодом RGB.
Вывод
Чтобы изменить цвет кнопки при нажатии в CSS, « : активный можно использовать псевдокласс. Более конкретно, он может представлять элемент кнопки, когда он активируется. Используя этот класс, вы можете установить разные цвета кнопок, когда на них щелкает мышь. В этой статье объясняется процедура изменения цвета кнопки при нажатии в CSS.
HTML
< центр >< h1 > Изменить цвет кнопки < / h1 >
< кнопка учебный класс знак равно 'кнопка' > Нажми на меня < / кнопка >
< / центр >
Далее мы перейдем к CSS, стилизуем кнопку и применим к ней :active. Для этого мы установим стиль границы как « никто » и укажите отступы как « 15 пикселей ». После этого установите цвет текста кнопки как « RGB(50, 0, 54) ” и его фон как “ RGB(177, 110, 149) », а его радиус как « 15 пикселей ”:
.кнопка {граница : никто ;
набивка : 15 пикселей ;
цвет : RGB ( 50 , 0 , 54 ) ;
фоновый цвет : RGB ( 177 , 110 , 149 ) ;
радиус границы : 15 пикселей ;
}
Это покажет следующий результат:
После этого мы применим псевдокласс :active к кнопке как « .кнопка: активная ” и установите цвет кнопки как “ RGB(200, 255, 0) ”:
.кнопка : активный {фоновый цвет : RGB ( 200 , 255 , 0 ) ;
}
После того, как вы реализуете весь приведенный выше код, перейдите к файлу HTML и выполните его, чтобы проверить результат:
Из вывода видно, что при нажатии кнопки ее цвет изменяется в соответствии с указанным цветовым кодом RGB.
Вывод
Чтобы изменить цвет кнопки при нажатии в CSS, « : активный можно использовать псевдокласс. Более конкретно, он может представлять элемент кнопки, когда он активируется. Используя этот класс, вы можете установить разные цвета кнопок, когда на них щелкает мышь. В этой статье объясняется процедура изменения цвета кнопки при нажатии в CSS.