• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов » Анимированное расширение кнопки на CSS (Анимированные кнопки при помощи HTML + CSS)
Анимированное расширение кнопки на CSS
Kosten
Дата: Четверг, 2019-08-01, 21:50 | Сообщение 1
Администраторы
Сообщений:24295
Награды: 56


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

1.



2.



HTML

Код
<a class="coevorma-ncetagen" href="#" target="_blank" rel="nofollow noopener">Пишем тематическое значение</a>

CSS

Код
.coevorma-ncetagen {
    border: none;
    background: #383434;
    color: #e8e7e7 !important;
    font-weight: 100;
    padding: 20px;
    text-transform: uppercase;
    border-radius: 10px;
    display: inline-block;
    transition: all 0.3s ease 0s;
}

.coevorma-ncetagen:hover {
color: #3c3737 !important;
font-weight: 700 !important;
letter-spacing: 3px;
background: none;
-webkit-box-shadow: 0px 5px 40px -10px rgba(14, 14, 14, 0.57);
-moz-box-shadow: 0px 5px 40px -10px rgba(14, 14, 14, 0.57);
transition: all 0.3s ease 0s;
}

Вот еще один стиль кнопок, которые вы можете попробовать на своем сайте.

Демонстрация
Прикрепления: 0449895.png(4.8 Kb) · 4946924.png(9.6 Kb) · btsa.zip(2.7 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов » Анимированное расширение кнопки на CSS (Анимированные кнопки при помощи HTML + CSS)
  • Страница 1 из 1
  • 1
Поиск: