| Kosten | Понедельник, 20 Мая 2019, 02:26 | Сообщение 1 |
| Рассматривая hover эффект на кнопке, то изначально думал, что она идет с одной анимацией, это когда наводишь курок. И здесь не просто цветовая гамма меняется, а появляются со всех сторон элементы в красном оттенке, которые плавно соединяться, и получается кнопка. Ведь по умолчанию идет одно название, где даже не подозреваешь, что она установлена под заданными эффектами.
Но после того, как вы навели, то нужно произвести клик, это на переход или скачать файл, вот как раз здесь мы видим уникальный трюк анимации, который отлично смотрится на темном или светлом фоне. Здесь больше зависит от тех самых элементов, в какой палитре они покажутся, что безусловно на любом тематическом сайте смотрится интересно и оригинально.
Это при наведение:
HTML
Код <a href="#" class="nekago_usivasm_notab">Красивый эффект анимации кнопки</a>
CSS
Код .nekago_usivasm_notab {
padding: .8em;
text-decoration: none;
color: #f9f4f4;
background: no-repeat;
background-image: linear-gradient(#f11212, #f10b0b), linear-gradient(#f70c0c, #f70b0b), linear-gradient(#f51010, #f50d0d), linear-gradient(#f50b0b, #f70909);
background-size: 2px 0, 2px 0, 0 2px, 0 2px;
background-position: 0 50%, 100% 50%, 50% 0, 50% 100%;
}
.nekago_usivasm_notab:active {
background: #d8d0d0;
}
.nekago_usivasm_notab:hover {
transition: .7s;
background-size: 2px 100%, 2px 100%, 100% 2px, 100% 2px;
}
Перейдя на demo страницу, вы можете изначально посмотреть все трюки, которые прописаны в эффекте и закреплены на кнопке.
Демонстрация
| | Страна: (RU) |
| |
