8 простих CSS ефектів при наведенні

18

Від автора: У міру того як з кожним релізом нових версій браузерів зростає підтримка CSS3, а нудні браузери, що підтримують тільки CSS2, поступово йдуть зі «сцени», у нас з’являється набагато більше варіантів для використання ефектів при наведенні і переходів. Практично всі кнопки призову до дії (call-to-action), які можна побачити на веб-сайтах, що використовують в тому чи іншому вигляді ефекти при наведенні, тому що вони привертають увагу і роблять веб-сайт більш цікавим.

В минулому році я поділилася з вами набором з 8 простих переходів, які вразять ваших користувачів, а сьогодні ми розглянемо ще 8 ефектів…

Починаємо

Як і раніше ми почнемо з дуже простого HTML, до якого ми потім будемо застосовувати ефекти:

Hover Me

Ми також будемо використовувати набір базових стилів CSS для всіх переходів і анімації. Ми просто поставимо деякі початкові параметри, наприклад, колір тла і розмір шрифту.

По-справжньому важливе правило знаходиться в самому кінці — це transition: all 500ms ease, яке означає, що в потрібний момент будуть анімовані всі властивості в проміжку дорівнює 500 мілісекунд:

button {
border: none;
background: #3a7999;
color: #f2f2f2;
padding: 10px;
font-size: 18px;
border-radius: 5px;
position: relative;
box-sizing: border-box;
transition: all 500ms ease;
}

А тепер до найцікавішого…

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

Тут ми змінюємо лише параметр висоти замість ширини:

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%);
}

Як бачите, щоб активувати даний ефект я перемістила опорну точку трансформації в центр, а також повернула сам елемент, щоб реалізувати трансформацію.