• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создание hover эффекта для кнопки на CSS (Красивый эффект при наведении на кнопку с помощью CSS)
Создание hover эффекта для кнопки на CSS
Kosten
Дата: Понедельник, 2019-05-20, 02:26 | Сообщение 1
Администраторы
Сообщений:24298
Награды: 56


Рассматривая 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 страницу, вы можете изначально посмотреть все трюки, которые прописаны в эффекте и закреплены на кнопке.

Демонстрация
Прикрепления: 1525066.png(2.2 Kb) · knopka.zip(1.5 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создание hover эффекта для кнопки на CSS (Красивый эффект при наведении на кнопку с помощью CSS)
  • Страница 1 из 1
  • 1
Поиск: