Эта кнопка сделана на чистом CSS, где можно выставить любой оттенок цвета, но главное в ней, это безусловно эффект. Который заключается в том, что изначально кнопка выставлена в своих габаритах, но стоит навести, как она по сторонам растягивается. Опять же, эта кнопка полностью настраиваемая, поэтому вы можете редактировать ее любым удобным для вас способом.
1.
2.
HTML
Код
<a class="coevens-olestagen" href="http://zornet.ru/" target="_blank" rel="nofollow noopener">ZorNet.Ru — сайт для вебмастера</a>
CSS
Код
.coevens-olestagen {
color: #f9e1e1 !important;
text-transform: uppercase;
text-decoration: none;
background: #c11b18;
padding: 15px;
border-radius: 3px;
display: inline-block;
border: none;
transition: all 0.4s ease 0s;
}
.coevens-olestagen:hover {
background: #434343;
letter-spacing: 1px;
-webkit-box-shadow: 0px 5px 40px -10px rgba(31, 29, 29, 0.57);
-moz-box-shadow: 0px 5px 40px -10px rgba(31, 29, 29, 0.57);
box-shadow: 5px 40px -10px rgba(31, 29, 29, 0.57);
transition: all 0.4s ease 0s;
}
Также как заметили, что на светлом фоне отлично смотрится тень, что идет в самом низу элемента.
Демонстрация
