Как создавать кнопки с использованием CSS

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

В этой статье поделимся базовыми возможностями CSS, чтобы делать привлекательные кнопки для вашего сайта.

В HTML5 стандартная кнопка выглядит так:

HTML:<button>Простая кнопка</button>

Для того, чтобы в кастомизировать кнопку, создадим класс .button, который в дальнейшем будет использоваться как базовый.

CSS:.button{
	display: inline-block;
	border: none;
	background: none;
}

Цвет кнопки

В CSS за определенный цвет кнопки отвечает свойство background.

HTML:<button class="button btn-1">Кнопка 1</button>
<button class="button btn-2">Кнопка 2</button>
<button class="button btn-3">Кнопка 3</button>
CSS:.btn-1{
	background: red;
}
.btn-2{
	background: green;
}
.btn-3{
	background: blue;
}

Результат:

Закругленные углы

Существует специальное свойство border-radius для задания эффекта закругления кнопкам в CSS.

CSS:.btn-1{
	border-radius: 6px;
}
.btn-2{
	border-radius: 25px;
}
.btn-3{
	border-radius: 50%;
}

Результат:

Стоит отметить, что конструкция border-radius: 50% также применяется и для того, чтобы превратить квадрат в круг. В этом случае ширина и высота кнопки или любого другого объекта должны быть одинаковыми. В нашем примере пусть ширина и высота будут равны 100px.

Эффект наведения на кнопку

С помощью так называемого псевдоэлемента :hover можно изменить цвет или любой другой атрибут кнопки при наведении указателя мыши на кнопку.

CSS:.btn-1:hover{
	background: blue;
}
.btn-2:hover{
	background: red;
}
.btn-3:hover{
	background: green;
}

Результат:

Плавное изменение цвета кнопки

Для плавного изменения свойства воспользуемся свойством transition.

CSS:.button{
	transition: all 0.3s;
}

Результат:

Тень

Используйте свойство box-shadow, чтобы задать тень кнопки.

CSS:.shadow{
	box-shadow: 0 0 10px #000;
}

Результат:

Градиент фона кнопки

CSS:.btn-gr-1 {
	background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
}

.btn-gr-2 {background-image: linear-gradient(to right, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%);
}

.btn-gr-3 {background-image: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%);
}

Результат:

Градиент рамки кнопки

HTML:
<button class="button btn-gr-1"><span>Кнопка 1</span></button>
<button class="button btn-gr-2"><span>Кнопка 2</span></button>
<button class="button btn-gr-3"><span>Кнопка 3</span></button>
CSS:.btn-gr-1 {
	background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
}

.btn-gr-2 {background-image: linear-gradient(to right, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%);
}

.btn-gr-3 {background-image: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%);
}
.btn-gr-1 span, .btn-gr-2 span, .btn-gr-3 span{
	align-items: center;
	background: #fff;
	border-radius: 6px;
	display: flex;
	justify-content: center;
	height: 100%;
	transition: background .5s ease;
	width: 100%;
	padding: 8px 30px;
	color: #000;
}
.btn-gr-1:hover span, .btn-gr-2:hover span, .btn-gr-3:hover span{
	background: transparent;
	color: #fff;}

Результат:

Эффект волны при нажатии на кнопку

HTML:<button class="button btn-1">Кнопка 1</button>
<button class="button btn-2">Кнопка 2</button>
<button class="button btn-3">Кнопка 3</button>
CSS:.button:after {content: "";display: block;position: absolute;padding-top: 300%;padding-left: 350%;margin-left: -40px!important;margin-top: -120%;opacity: 0;transition: all 0.8s
}

.button:active:after {padding: 0;margin: 0;opacity: 1;transition: 0s
}
.btn-1:after{
	background: #ff6666;
}
.btn-2:after{
	background: #00e600;
}
.btn-3:after{
	background: #6666ff;
}

Результат:

Поделитеcь в соцсетях