По мере того как с каждым релизом новых версий браузеров растет поддержка CSS3, а скучные браузеры, поддерживающие только CSS2, постепенно уходят со «сцены», у нас появляется гораздо больше вариантов для использования эффектов при наведении и переходов. Практически все кнопки призыва к действию (call-to-action), которые можно увидеть на веб-сайтах, используют в том или ином виде эффекты при наведении, потому что они привлекают внимание и делают веб-сайт более интересным.
Начинаем
Как и раньше мы начнем с очень простого HTML, к которому мы затем будем применять эффекты:
<button>Hover Me</button>
Мы также будем использовать набор базовых CSS стилей для всех переходов и анимаций. Мы просто зададим некоторые начальные параметры, например, цвет фона и размер шрифта.
По-настоящему важное правило находится в самом конце — это transition: all 500ms ease, которое означает, что в нужный момент будут анимированы все свойства в промежутке равном 500 миллисекунд:
А теперь к самому интересному…
1. Горизонтальная заполнение
Данный эффект, который я все чаще стала замечать, заключается в том, что полупрозрачный фоновый цвет постепенно заполняет кнопку при наведении. Обычно заполнение происходит с какой-то одной стороны и переход длится до тех пор, пока вся кнопка не будет заполнена.
Чтобы достичь такого результата, нам нужно использовать псевдо-элемент :before:
button:before {
content:'';
position: absolute;
top: 0px;
left: 0px;
width: 0px;
height: 42px;
background: rgba(255,255,255,0.3);
border-radius: 5px;
transition: all 2s ease;
}
Данный контент абсолютно спозиционирован и расположен в верхнем левом углу кнопки. Я задала для него ширину равную 0px, потому что именно этот параметр мы будем анимировать. Чтобы анимировать его, мы просто изменим его ширину:
button:hover:before {
width: 100%;
}
2. Вертикальное заполнение
Данный эффект очень похож на предыдущий, за исключением того, что теперь мы будем анимировать высоту, чтобы цветовое заполнение происходило сверху:
button:before {
content:'';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 0px;
background: rgba(255,255,255,0.3);
border-radius: 5px;
transition: all 2s ease;
}
Здесь мы изменяем лишь параметр высоты вместо ширины:
view sourceprint?
1.button:hover:before {
2.height: 42px;
3.}button:hover:before {
height: 42px;
}
3. «Кнопка-призрак»
Сейчас мы создадим простой, но очень эффектный переход для нашей кнопки. Эффект «кнопки-призрака» заключается в том, что мы инвертируем цвет внутри кнопки и добавляем границу:
button:hover {
background: rgba(0,0,0,0);
color: #3a7999;
box-shadow: inset 0 0 0 3px #3a7999;
}
При наведении я задаю для кнопки прозрачный фон, чтобы он подходил к окружающему фону вокруг элемента. Затем я добавляю цвет и простую тень.
4. Появление иконки
Данный эффект замечательно подходит для различных действий, например, добавление товара в корзину или отправка формы. Он заключается в том, чтобы заставить иконку плавно появиться слева от текста, когда пользователь наводит курсором мыши на кнопку.
Первым делом я немного увеличила внутренний отступ, чтобы для появляющейся иконки было место, и добавила свойство overflow со значением hidden:
button{
padding: 10px 35px;
overflow:hidden;
}
Далее я добавила иконку в виде тележки для покупок (для этого я использую иконочный шрифт Font Awesome) в псевдо-элемент before и расположила его за пределами кнопки:
button:before {
font-family: FontAwesome;
content:"\f07a";
position: absolute;
top: 11px;
left: -30px;
transition: all 200ms ease;
}
Теперь все, что нам остается сделать, — это установить свойство left:
button:hover:before {
left: 7px;
}
5. Эффект подпрыгивания
В данной анимации мы установим для кнопки несколько ключевых кадров (keyframes), чтобы получить при наведении на кнопку эффект подпрыгивания. Это всегда отлично привлекает внимание пользователей. Сначала нам нужно создать ключевые кадры:
@keyframes bounce {
0%, 20%, 60%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
80% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
}
А теперь мы просто добавляем анимацию при наведении:
button:hover {
animation: bounce 1s;
}
6. Искажение
Искажение, определенно, является одним из наболее специфичных трансформаций в CSS3. Данный эффект присутствует в программе Photoshop уже на протяжении многих лет, но его появление в CSS3, по меньшей мере, стало настоящим сюрпризом. Тем не менее, это интересный переход, и его использование является очень простым. Просто установим его при наведении:
button:hover {
transform: skew(-10deg);
}
7. Пунктирная граница
Этот эффект очень похож на эффект с «кнопкой-призраком», но вместо сплошной границы у нас будет пунктирная линия. Все, что нам действительно нужно сделать, — это добавить границу у кнопки и инвертировать цвета:
button {
border: 3px solid #3a7999;
}
button:hover {
border: 3px dotted #3a7999;
color: #3a7999;
background: rgba(0,0,0,0);
}
8. Эффект 3D переворота
Этот заключительный эффект будет немного сложнее, т.к. в нем используется переворот кнопки для отображения другого сообщения, которое мы добавили в псевдо-элемент after у нашей кнопки.
Давайте начнем с того, что зададим для свойства transform-style значение preserve-3d, чтобы все дочерние элементы кнопки находились в 3D-пространстве:
button {
transform-style: preserve-3d;
}
После этого нам нужно заняться нашим псевдо-элементом after:
button:after {
top: -100%;
left: 0px;
width: 100%;
position: absolute;
background: #3a9999;
border-radius: 5px;
content: 'Flipped';
transform-origin: left bottom;
transform: rotateX(90deg);
}
Я добавила его сверху, перед кнопкой, и выставила такие же параметры width и border-radius, как и у самой кнопки. Что касается свойств трансформации, то в качестве опорной точки, относительно которой будет происходить трансформация, я установила нижний левый угол элемента и указала вращение по оси X со значением 90 градусов, чтобы элемент казался плоским. Сейчас осталось только создать анимацию при наведении:
button:hover {
transform-origin: center bottom;
transform: rotateX(-90deg) translateY(100%);
}
Как видите, чтобы активировать данный эффект я переместила опорную точку трансформации в центр, а также повернула сам элемент, чтобы реализовать трансформацию.
Автор: Sara Vieira