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

    Кнопки CSS

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

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

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

    HTML:

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

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

    Цвет кнопки

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

    HTML:
    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:
    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:
    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;
    }
    Результат:

    Получайте полезную информацию
    на Вашу почту еженедельно

    Ваш Email не будет передан третьим лицам