Классные стили для кнопок

demosourse

Коллекция свежих экспериментальных стилей для кнопок. Используются CSS анимация и манипуляция псевдо-элементами.

Разметка

<button class="button button--ujarak">Vote</button>

Основные стили для кнопок:

.button {
	float: left;
	min-width: 150px;
	max-width: 250px;
	display: block;
	margin: 1em;
	padding: 1em 2em;
	border: none;
	background: none;
	color: inherit;
	vertical-align: middle;
	position: relative;
	z-index: 1;
}

.button:focus {
	outline: none;
}

.button > span {
	vertical-align: middle;
}

В некоторых случаях, внутри кнопок мы используем дополнительные элементы типа span. Так же данные эффекты можно применить и к ссылкам, только тогда вам нужно будет чуть подправить HTML.

Следующие стили предназначены для оформления границ, размеров и прочих свойств:

.button--size-s {
	font-size: 14px;
}

.button--size-m {
	font-size: 16px;
}

.button--size-l {
	font-size: 18px;
}

/* Типография */
.button--text-upper {
	letter-spacing: 2px;
	text-transform: uppercase;
}

.button--text-thin {
	font-weight: 300;
}

.button--text-medium {
	font-weight: 500;
}

.button--text-thick {
	font-weight: 600;
}

.button--round-s {
	border-radius: 5px;
}

.button--round-m {
	border-radius: 15px;
}

.button--round-l {
	border-radius: 40px;
}

/* Границы */
.button--border-thin {
	border: 1px solid;
}

.button--border-medium {
	border: 2px solid;
}

.button--border-thick {
	border: 3px solid;
}

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

Давайте взглянем на пример под названием “Itzel”:

В данном примере мы используем маску, применив её к псевдо-элементу кнопки. Этот способ будет работать только в последних версиях браузеров. IE, как всегда, является исключением. В Firefox будем использовать SVG и clipPath.

Для достижения эффекта мы прячем псевдо-элемент, сдвигая его вниз. При возвращении в исходное состояние применим другую трансформацию границ элемента. Иконка исчезает по тому же принципу. При наведении мыши, текст исчезает за счёт установки значения opacity, равной 0.

/* Itzel */
.button--itzel {
	border: none;
	padding: 0px;
	overflow: hidden;
	width: 255px;
}

.button--itzel::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 2px solid;
	border-radius: inherit;
	-webkit-clip-path: polygon(0% 0%, 0% 100%, 35% 100%, 35% 60%, 65% 60%, 65% 100%, 100% 100%, 100% 0%);
	clip-path: url(../index.html#clipBox);
	transform: translate3d(0, 100%, 0) translate3d(0, -2px, 0);
	transform-origin: 50% 100%;
}

.button--itzel.button--border-thin::before {
	border: 1px solid;
	transform: translate3d(0, 100%, 0) translate3d(0, -1px, 0);
}

.button--itzel.button--border-thick::before {
	border: 3px solid;
	transform: translate3d(0, 100%, 0) translate3d(0, -3px, 0);
}

.button--itzel::before,
.button--itzel .button__icon {
	transition: transform 0.3s;
	transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}

.button--itzel .button__icon {
	position: absolute;
	top: 100%;
	left: 50%;
	padding: 20px;
	font-size: 20px;
	transform: translate3d(-50%, 0, 0);
}

.button--itzel > span {
	display: block;
	padding: 20px;
	transition: transform 0.3s, opacity 0.3s;
	transition-delay: 0.3s;
}

.button--itzel:hover::before {
	transform: translate3d(0, 0, 0);
}

.button--itzel:hover .button__icon {
	transition-delay: 0.1s;
	transform: translate3d(-50%, -100%, 0);
}

.button--itzel:hover > span {
	opacity: 0;
	transform: translate3d(0, -50%, 0);
	transition-delay: 0s;
}

Со стилями всё.

Надеемся, что данные примеры будут вам полезны.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://tympanus.net/codrops/2015/02/26/inspiration-button-styles-effects/
Перевел: Станислав Протасевич
Урок создан: 28 Февраля 2015
Просмотров: 26146
Правила перепечатки


5 последних уроков рубрики "CSS"

^ Наверх ^