Креативные стили кнопок на CSS

Сегодня я хотел бы рассказать вам про некоторые интересные стили кнопок для вашего сайта. Этот набор состоит из простых, креативных кнопок с простыми стилями и эффектами. На определенных кнопках эффекты можно увидеть при наведении, на некоторых при нажатии. Главным образом используются CSS переходы, CSS анимация и для некоторых кнопок мы используем JavaScript для добавления/удаления классов.

Сложность

Иконки, которые мы используем совместно с псевдо-классами :before и :after, создали при помощи сервиса IcoMoon.

Разметка кнопки действительно простая. Мы просто добавляем общий класс и один уникальный:

<button class="btn btn-6 btn-6d">Button</button>

Мы используем определенные пронумерованные классы для различных наборов стилей кнопок. Каждая кнопка имеет дополнительный уникальный класс. С иконкой, мы добавляем дополнительный класс, который будет использовать псевдо элемент :before. Пример вы можете найти на сайте www.sitetop-spb.ru.

Пример стиля кнопки:

/* Кнопка 1 */
.btn-1 {
	border: 3px solid #fff;
	color: #fff;
}

/* Кнопка 1a */
.btn-1a:hover,
.btn-1a:active {
	color: #0e83cd;
	background: #fff;
}

/* Кнопка 1b */
.btn-1b:after {
	width: 100%;
	height: 0;
	top: 0;
	left: 0;
	background: #fff;
}

.btn-1b:hover,
.btn-1b:active {
	color: #0e83cd;
}

.btn-1b:hover:after,
.btn-1b:active:after {
	height: 100%;
}

/* Кнопка 1c */
.btn-1c:after {
	width: 0%;
	height: 100%;
	top: 0;
	left: 0;
	background: #fff;
}

.btn-1c:hover,
.btn-1c:active {
	color: #0e83cd;
}

.btn-1c:hover:after,
.btn-1c:active:after {
	width: 100%;
}

/* Кнопка 1d */
.btn-1d {
	overflow: hidden;
}

.btn-1d:after {
	width: 0;
	height: 103%;
	top: 50%;
	left: 50%;
	background: #fff;
	opacity: 0;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}

.btn-1d:hover,
.btn-1d:active {
	color: #0e83cd;
}

.btn-1d:hover:after {
	width: 90%;
	opacity: 1;
}

.btn-1d:active:after {
	width: 101%;
	opacity: 1;
}
ДЕМО СКАЧАТЬ

 

Перевод статьи Creative Button Styles

Тэги: button

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.