Универсальная кнопка без углов но в со стильным эффектом, которая отлично подойдет на все сайты, как на темный или светлый формат. Так как она имеет эффект, который заключается в том, что при наведение появляется тень, что веб мастер самостоятельно настроит под свою стилистику.
Второй стиль кнопки, показанный ниже, такой же, как и выше, однако края сделаны так, что они выглядят более округлыми. При наведении на кнопку поднимается с небольшим эффектом тени. Текст также имеет небольшой эффект свечения тени при наведении.
Где по сути 2 эффекта, это тень под элементом, а также оттенок цвета под знаком, и все при наведение курсора.
1.
2.
HTML
Код
<a class="zornet-kigdsan" href="add-website-here" target="_blank" rel="nofollow noopener">Ключевое слово</a>
CSS
Код
.zornet-kigdsan {
color: #fbefef !important;
text-transform: uppercase;
text-decoration: none;
background: #29677d;
padding: 18px;
border-radius: 50px;
display: inline-block;
border: none;
transition: all 0.4s ease 0s;
}
.zornet-kigdsan:hover {
text-shadow: 0px 0px 6px rgba(249, 245, 245);
-webkit-box-shadow: 0px 5px 40px -10px rgba(16, 16, 16, 0.57);
-moz-box-shadow: 0px 5px 40px -10px rgba(16, 16, 16, 0.57);
transition: all 0.4s ease 0s;
}
Опять же, эта кнопка полностью настраиваемая, поэтому вы можете редактировать ее любым удобным для вас способом.
Демонстрация
