Иногда на сайт нужно поставить анимированную кнопку, которая безусловно отличается своим эффектом, где при наведение эта кнопка меняет оттенок цвета и начинает по сторонам медленно растягиваться. Интервал между буквами также увеличивается при наведении. Когда вы перемещаете указатель от кнопки, буквы возвращаются в нормальное состояние.
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;
}
Вот еще один стиль кнопок, которые вы можете попробовать на своем сайте.
Демонстрация
