Это простой вариант на кнопку, где подключаем к ней анимацию и она после этого становится совершенно по другому выглядеть. Здесь задействованы стили для создания кнопки, где самостоятельно в стилистике выставляем анимацию, что можно поставить под любой оттенок цвета.
Такой вид отлично будет смотреться, но главным способом замечен на любом формате сайта, это как светлый или темный формат. Также изначально предоставлена demo страница, что она уже установлена в ярком оттенке, или скажем в одном из многих цветовых гамм.
HTML
Код
<a class="dekiposam-lovimas" href="http://zornet.ru/">Zornet.Ru</a>
CSS
Код
.dekiposam-lovimas {
text-decoration: none;
outline: none;
display: inline-block;
padding: 12px 38px;
margin: 12px 27px;
position: relative;
overflow: hidden;
border: 2px solid #8f1b9e;
background: #ce37fe;
color: #f1f1f1;
border-radius: 8px;
font-family: 'Montserrat', sans-serif;
transition: .3s ease-in-out;
}
.dekiposam-lovimas:before {
content: "";
background: linear-gradient(90deg, rgba(189, 189, 189, 0.03), rgba(236, 235, 235, 0.5));
height: 48px;
width: 48px;
position: absolute;
top: -7px;
transform: skewX(-45deg);
animation: shine 1s linear infinite;
}
@keyframes shine {
from {left: -75px;}
to {left: 150px;}
}
Еще одна вариация на трехмерность анимации стилистики CSS кнопок для сайтов.
Демонстрация
