Текущий, так называемый, «кнопочный тренд» действительно впечатляет, ведь у нас появились возможности для создания огромного количества разнообразных стилей. Теперь можно смело экспериментировать с линиями и шрифтами. На сайтах с фоновыми изображениями стали довольно популярными прозрачные кнопки со слегка скругленными углами. Но вас никто не ограничивает в степени скругления, выбор остается за вами, и вы можете создавать любые кнопки, которые вписываются в ваш дизайн. Но у всех современных кнопок есть общие черты – это простота и ненавязчивость эффектов. Мы постарались создать сбалансированный набор стилей и эффектов для кнопок, в котором не используется чересчур много анимации. Наоборот, мы постарались добавить осознанности каждому эффекту, чтобы он сочетался с цветами и формами самих кнопок. Некоторые из стилей более смелые – они могут подойти для некоторых особых дизайнов.
Мы решили, что все эффекты будут единообразно срабатывать при наведении. Для некоторых эффектов могло бы подойти срабатывание при клике, но выбор остается за вами, и вы можете сами решать, как использовать полученные идеи.
Пожалуйста, обратите внимание на то, что некоторые используемые техники поддерживаются только современными браузерами. (Мобильная версия) Safari очень слабо поддерживает данные эффекты.
В большинстве случаев мы используем CSS переходы, но есть также несколько примеров с CSS анимациями. На этот раз мы использовали своего рода модульный подход, при котором мы сначала прописываем определенные свойства, например, border-radius, font-size, border и т.д. для отдельных классов, чтобы упростить процесс создания определенной кнопки. Если вы захотите использовать единый стиль, тогда мы рекомендуем вам объединить стили в один набор правил.
Разметка
<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. Данные стили и эффекты также могут представлять интерес при оформлении ссылок; в данном случае вам понадобиться заменить элемент button на ссылку и подкорректировать стили соответствующим образом. С помощью следующих классов мы можем управлять границами, размерами и скруглением углов:
/* Размеры */
.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»:
В данном эффекте используется свойство clip-path для обрезки части границы у псевдо-элемента кнопки. Данный эффект будет работать только в браузерах, поддерживающих данное свойство, к которым в настоящий момент не относится IE. Для Firefox нам нужно использовать SVG с clipPath, который мы определяем в HTML.
Для получения нужного эффекта мы прячем псевдо-элемент, который имеет обрезанную область снизу за счет смещения его вниз с помощью трансформации. Затем мы поднимем его наверх с помощью другой трансформации. Мы не видим его изначально, т.к. для кнопки задано свойство overflow: hidden. Таким же образом смещена вниз и иконка. Когда мы наводим курсор мыши на иконку, то мы заставляем текст исчезнуть, делая его полностью прозрачным (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;
}
Вот и все стили для данного эффекта.
Есть несколько проблем с (мобильной версией) Safari. В частности, это касается свойств border-radius и overflow: hidden. Псевдо-элементы не хотят замечать свойство overflow (чаще всего в процессе перехода), и у нас также остается проблема с пустым промежутком, которая обычно решается с помощью -webkit-backface-visibility: hidden. Если вы найдете решение этой проблемы, пожалуйста, сообщите нам (лучше через GitHub).
Мы надеемся, что вам понравились данные стили для кнопок и они вдохновили вас на создание чего-нибудь классного!
See the Pen button hover5 by vavik (@vavik96) on CodePen.