Перефразируя слова из известной песни, можно сказать, что кнопки бывают разные - черные, белые, красные. Кнопки обладают не только формами и цветами, но и умеют реагировать на те или иные события, в частности, событие на клик или на наведение указателя мыши на кнопку.
В этой статье поделимся базовыми возможностями CSS, чтобы делать привлекательные кнопки для вашего сайта.
В HTML5 стандартная кнопка выглядит так:
HTML:
Для того, чтобы в кастомизировать кнопку, создадим класс .button, который в дальнейшем будет использоваться как базовый.
CSS:
.button{
display: inline-block;
border: none;
background: none;
}
Цвет кнопки
В CSS за определенный цвет кнопки отвечает свойство background.
HTML:
.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:
.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: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;
}