• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов HTML » Hover эффект при наведение ссылки HTML & CSS (Создать красивую анимацию на кнопки при помощи CSS3)
Hover эффект при наведение ссылки HTML & CSS
Kosten
Дата: Воскресенье, 2018-10-14, 20:19 | Сообщение 1
Администраторы
Сообщений:18498
Награды: 55


На сайте эффект Hover, дает гостям портала и пользователям оригинальное виденье, в то время когда они начинают наводит на кнопку. Если ранее можно было только на фотошоп выставить пару оттенок, то при обновленном CSS3, стало больше различных по сложности эффектов на сайте.

Что этот не исключение, который построен под темный дизайн, где изначально идет обвод, в котором закруглены углы, то только наводите курсор, как этот обвод выезжает немного в бок. Но здесь сам веб мастер по скорости и его эффекту может поставить те значение в стилистике, как ему нужно. не говоря о стилистике, включая оттенок цвета.



HTML

Код
<div class="dutaria-neatures">
     <nav class="blatanamis-represented">
     <a href="#">SEO</a>
     <a href="#">CSS</a>
     <a href="#">Стили</a>
     <a href="#">Код</a>
  </nav>
</div>

CSS

Код
.dutaria-neatures {
    padding: 5em;
    text-align: center;
    font-family: 'Lato', sans-serif;
    background: #303e5f;
}

nav a {
    position: relative;
    display: inline-block;
    margin: 7px 10px;
    padding: 9px 18px;
    color: #fdffe5;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    font-weight: 400;
    font-size: 1.3em;
}

.blatanamis-represented a {
    padding: 8px 17px;
}

.blatanamis-represented a::before,
.blatanamis-represented a::after  {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #5a6267;
    content: '';
    transition: transform 0.5s, opacity 0.5s;
     border-radius: 7px;
}

.blatanamis-represented a::after  {
    border-color: #f1f1f1;
    opacity: 0;
    transform: translateY(-3px) translateX(5px);
}

.blatanamis-represented a:hover::before,
.blatanamis-represented a:focus::before {
    opacity: 0;
    transform: translateY(3px) translateX(-3px);
}

.blatanamis-represented a:hover::after,
.blatanamis-represented a:focus::after  {
    opacity: 1;
    transform: translateY(0px) translateX(0px);
}


Демонстрация
Прикрепления: 2287574.png(6.9 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов HTML » Hover эффект при наведение ссылки HTML & CSS (Создать красивую анимацию на кнопки при помощи CSS3)
  • Страница 1 из 1
  • 1
Поиск: