• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Скользящие эффекты для кнопок на CSS3 (Красивая анимация для кнопки при наведение курсора)
Скользящие эффекты для кнопок на CSS3
Kosten
Понедельник, 08 Октября 2018 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44267
Награды: 70
Прекрасный эффект, который исполняется при наведение курсора, что здесь идет оригинальная анимация. Если на стандартном трюке можно заметить, что только цветовой фон поменяется. То в нашем случай все идет на знаки, так как они будут изменятся с той скоростью. которую в стилистике CSS можно выставить. Вообщем при наведение происходит смена знаков, где можно аналогичные поставить и только поменять саму гамму, что здесь сделал.

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



Приступаем к установке:

HTML

Код
<div class="kogered-lidingets">
  <span data-text="Z">Z</span>
  <span data-text="O">O</span>
  <span data-text="R">R</span>
  <span data-text="N">N</span>
  <span data-text="E">E</span>
  <span data-text="T">T</span>
</div>


CSS

Код
.kogered-lidingets {
    width: 215px;
    height: 58px;
    border: 2px solid #909090;
    text-align: center;
    font-size: 28px;
    line-height: 58px;
    font-family: sans-serif;
    overflow: hidden;
    border-radius: 7px;
    cursor: pointer;
    background: #cecece;
    box-shadow: 0px 1px 15px 3px rgba(51, 48, 48, 0.18), 1px 3px 30px 3px rgba(33, 30, 30, 0.23);
}

.kogered-lidingets span {
    display: inline-block;
    color: #14528a;
    transition: 0.7s;
}

.kogered-lidingets span:nth-child(odd) {
    transform: translateY(-100%);
}

.kogered-lidingets span:nth-child(even) {
    transform: translateY(100%);
}

.kogered-lidingets span::before {
    content: attr(data-text);
    position: absolute;
    color: #095a22;
}

.kogered-lidingets span:nth-child(odd)::before {
    transform: translateY(100%);
}

.kogered-lidingets span:nth-child(even)::before {
    transform: translateY(-100%);
}

.kogered-lidingets:hover span {
    transform: translateY(0);
}

Установка завершена, где также представлена demo страница. С моей стороны были добавлены тени, что изначально понастроено на светлый фон.

Демонстрация
Прикрепления: 5865935.jpg (11.4 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Скользящие эффекты для кнопок на CSS3 (Красивая анимация для кнопки при наведение курсора)
  • Страница 1 из 1
  • 1
Поиск: