Html button поменять цвет

Оформление кнопок

Через CSS к любой кнопке применяются следующие параметры оформления: ширина и высота, фон, рамку, цвет и размер текста и др. Также к самим кнопкам и к тексту на них можно добавить тень.

Ширина и высота кнопки

Размеры кнопки явно устанавливать обычно необходимости нет, потому что кнопки автоматически подстраивают свой размер под имеющийся текст или изображение. Тем не менее, иногда в угоду дизайну приходится указывать ширину и высоту кнопки через соответствующие свойства width и height (пример 1).

Также на размер кнопки можно косвенно влиять через свойство padding. Оно добавляет пространство вокруг текста, расширяя кнопку по вертикали и горизонтали (пример 2).

Пример 2. Использование padding

Здесь у свойства padding два значения: первое устанавливает пространство вокруг текста по вертикали, второе по горизонтали.

Параметры текста

К тексту на кнопке применимы те же свойства, что и для обычного текста. В частности, допустимо менять шрифт, размер текста, его насыщенность, цвет и др. В примере 3 для текста кнопки устанавливается зелёный цвет и моноширинный шрифт с заглавными буквами.

Рамка

Для управления параметрами рамки применяется свойство border и его производные: border-width, border-style и border-color. В примере 4 класс .btn устанавливает основные параметры кнопки, в том числе толщину, стиль и цвет рамки. Для расширения набора кнопок в пример включены дополнительные классы, меняющие цвет рамки и текста. Таким образом, к достаточно добавить класс .btn и класс с нужным цветом, например, .info .

Пример 4. Цветные рамки у кнопки

Здесь используется набор кнопок с цветными рамками для различных ситуаций.

Скругление углов

За скругление уголков у рамок отвечает свойство border-radius, в качестве его значения указываются любые единицы размера из CSS, например, em, rem, пиксели, проценты и др. В примере 5 у кнопок радиус установлен как 0.4em .

Пример 5. Скруглённые уголки у кнопок

Разные значения border-radius дают и различную форму кнопок. В табл. 1 приведён вид кнопок, получаемый в зависимости от радиуса скругления.

Табл. 1. Значения радиуса скругления

Значение border-radius	Описание	Вид кнопки
0.5em	Такое значение устанавливает одинаковый радиус скругления у всех уголков кнопки.	Кнопка
5em	Любое большое значения радиуса, превышающее половину высоты кнопки, превращает кнопку в подобие пилюли.	Кнопка
50%	Процентная запись устанавливает разные значения радиуса по горизонтали и вертикали, поскольку проценты берутся отдельно от ширины и высоты кнопки. В итоге получается овальная кнопка.	Кнопка
0.8em 0 0.8em 0	Четыре значения позволяют установить радиус каждого уголка кнопки независимо. Отсчёт начинается от левого верхнего угла и идёт по часовой стрелке.	Кнопка

Фон

В примерах выше цвет фона делался прозрачным через свойство background-color со значением transparent . Аналогично устанавливается и произвольный цвет фона. Учтите, что у цветных кнопок сохраняется рамка по умолчанию, которая при желании убирается через свойство border-width или через свойство border-style со значением none . В примере 6 вводится несколько стилевых классов для кнопок, меняющих их цвет. К элементу достаточно добавить класс .btn и одновременно класс с желаемым цветом фона, например, .success .

Пример 6. Использование background-color

Здесь используется набор цветных кнопок для различных ситуаций.

Цветной фон допустимо комбинировать с цветной рамкой, получая разные вариации кнопок. В примере 7 рамка у кнопки сперва убирается, а затем к кнопке добавляется цветная линия снизу через свойство border-bottom.

Пример 7. Сочетание фона и линии

Градиентный фон

Вместо однотонного цветного фона для кнопок можно установить градиент через свойство background-image и функцию linear-gradient(). Например, для вертикального градиента от красного к синему цвету пишем следующее:

Для горизонтального градиента слева направо добавится ещё один параметр to right:

Вместо названия цветов или шестнадцатеричных значений цвет удобно задавать в формате rgba() . Тогда оставляя цвет исходным мы только меняем значение прозрачности. Здесь вместо оранжевого цвета #f79103 используется его аналог rgb(247, 145, 3), для начального и конечного цветов задана прозрачность 0.2.

linear-gradient( rgba(247, 145, 3, 0.2), rgb(247, 145, 3), rgba(247, 145, 3, 0.2) );

В примере 8 представлены градиентные кнопки для разных ситуаций, цвет которых задан через rgba() . Для контрастного выделения кнопок к ним, также, добавлена рамка соответствующего цвета.

Пример 8. Градиентные кнопки

Добавление тени

Как и к любому блоку, к легко добавляется тень через свойство box-shadow. У него четыре основных параметра: первые два отвечают за смещение тени, третий устанавливает её размытие, а четвёртый цвет тени. Так, для создания равномерной полупрозрачной тени вокруг кнопки используем следующую запись.

Для тени не вокруг кнопки, а внутри неё, добавляется параметр inset .

В примере 9 приведены несколько кнопок с разными параметрами box-shadow , дающими непохожие друг на друга тени.

Итоги

• Ширина и высота кнопки устанавливаются непосредственно через свойства width и height. Также на размер влияет свойство padding, оно задаёт расстояние от текста до края кнопки.
• Параметры рамки меняются с помощью свойства border, которое определяет толщину, стиль и цвет линии. Для скругления уголков рамки добавляется свойство border-radius.
• Цвет фона кнопки задаётся через свойство background-color, для градиентного фона применяется свойство background-image с функцией linear-gradient().
• Тень к кнопке добавляется через свойство box-shadow.

Источник

Как изменить цвет кнопки: полная инструкция для новичков

Меняем через псевдоэлемент :before (обратите внимание на span, который нужно разместить внутри кнопки) :

Кнопка внутри формы (input type=»submit»):

Тот же самый принцип, что и выше, но вместо button[type=»submit»] нужно в css прописать input[type=»submit»]

Кнопка, как отдельный элемент в html кода:

А теперь меняем цвет, с помощью псевдоэлемента :before

Кнопка в Bootstrap

Чтобы изменить цвет кнопки в Bootstrap, вам необходимо найти нужный класс (или id), а также нужный порядок вложенности элементов.

К примеру, у вас есть кнопка

И вы хотите изменить для нее цвет при наведении. Тогда я бы рекомендовал в css прописать следующее:

.btn.btn-outline-primary:hover < background: red; /* Либо любой другой цвет */ /* А также заменил бы цвет и для border */ >

Как изменить цвет кнопки с помощью Js

Я покажу два варианта, как поменять цвет кнопки при наведении используя JavaScript.

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

Второй вариант — мы будем менять css стили прямо в js:

Надеюсь, я помог вам разобраться, как можно изменить цвет кнопки при наведении на нее курсором. В заключении рекомендую посмотреть видео, чтобы окончательно развеять все вопросы.

Источник

How to Change Button Color on Click in CSS

Button is a clickable element used to perform a specific action. Using CSS, you can set different styles of buttons one of them is to change the color of a button on click. The color of a button can be set using the CSS “:active” pseudo-class.

This blog will teach you the procedure related to changing the button color on click. For this, firstly, learn about the :active pseudo-class.

What is “:active” in CSS?

Changing button color on click in CSS is possible with the help of the “:active” pseudo-class. In HTML, it indicates an element that is being activated when the user clicks on it. Moreover, when using a mouse, the activation starts when the mouse key is pressed.

“a” refers to the HTML element on which the :active class will be applied.

Let’s head towards an example to understand the stated concept.

How to Change Button Color on Click in CSS?

To change the color of a button on click, first, create a button in an HTML file and assign the class name “btn”.

HTML

Next, in CSS, set the color of the button. To do so, we will use “.btn” to access the button and set the color of the button as “rgb(0, 255, 213)”.

CSS

background-color : rgb ( 0 , 255 , 213 ) ;

After that, apply :active pseudo-class on the button as “.btn:active” and set the color of the button that will show in its active state as “rgb(123, 180, 17)”:

background-color : rgb ( 123 , 180 , 17 ) ;

This will show the following outcome:

Now, let’s add the heading with tag and button class name “button”, inside the tag.

HTML

Next, we will move to CSS and style the button and apply :active on it. To do so, we will set the border style as “none” and give padding as “15px”. After that, set the color of the button text as “rgb(50, 0, 54)” and its background as “rgb(177, 110, 149)”, and its radius as “15px”:

background-color : rgb ( 177 , 110 , 149 ) ;

This will show the following outcome:

After that, we will apply :active pseudo-class on the button as “.button:active” and set the color of a button as “rgb(200, 255, 0)”:

background-color : rgb ( 200 , 255 , 0 ) ;

Once you implement all of the above code, go to the HTML file and execute it to check out the result:

From the output, it can be observed when the button is clicked its color is changed according to the specified RGB color code.

Conclusion

To change the button color on click in CSS, the “:active” pseudo-class can be used. More specifically, it can represent the button element when it gets activated. Using this class, you can set different button colors when the mouse clicks on it. This article explained the procedure for changing button color on click in CSS.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.

Источник