Эффекты и стили кнопок css

Эффекты и стили кнопок css

Эффекты и стили кнопок css

Стили кнопок css и эффектов для вдохновения. Используются псевдо-элементы и переходы CSS для большинства эффектов. ДЕМО примеры под статьей.

Эффекты и стили кнопок css


СКАЧАТЬ СТИЛИ КНОПОК CSS


В настоящее время «Кнопочный тренд» весьма интересен, так как существует множество деталей дизайна в использовании, которые дают большое разнообразие для стилей. Есть много тонких линий и смелых решений в дизайне. Прозрачная кнопка с закругленными границами, вроде, довольно популярна на сайтах с изображением для фона. Но нет предела фантазии для создания кнопок подходящих для любых конструкций. Ниже представлен сбалансированный набор, где кнопки не анимированы слишком много, но добавлены разумные эффекты, которые неплохо сочетаются с цветами и формами. Некоторые из стилей немного смелые и могут поместиться в специальных конструкциях.

Некоторые эффекты могут лучше реагировать на щелчок, однако все зависит конечно же от вас, как вы намерены использовать эти идеи.

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

В большинстве случаев, используются CSS переходы, однако есть несколько примеров использующих CSS-анимацию.

Все стили кнопок 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;
}

В некоторых случаях имеется дополнительная разметка внутри кнопки. Эти стили кнопок и эффекты, также могут быть интересны и для ссылок; В этом случае вам необходимо соответствующим образом заменить 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»:

Itzel

Этот эффект использует clip-path, чтобы вырезать кусок границы псевдо-элемента кнопки. Для Firefox мы должны использовать SVG с clipPath.

Для получения эффекта, мы спрячем псевдо элемент, который имеет обрезанную область внизу, толкая его вниз с преобразованием. А вытягивается обратно, он путем применения другого преобразования. Значок отодвигается вниз таким же образом.

/* 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;
}

 

Aliexpress INTAliexpress INTAliexpress INT

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *