Здесь представлен дизайн, который содержат градиент, а также тени. Что отлично подойдет под кнопки любой тематики, так как самостоятельно можно изменить цветовую гамму, которая соответствует сайту.
HTML
Код
<div class="original-knopka">Кнопки</div>
CSS
Код
.original-knopka {
margin: 2em auto;
display: block;
-webkit-appearance: none;
border: 6px solid rgba(247, 240, 240, 0.45);
border-radius: 50px;
padding: 1em 3em;
background-repeat: no-repeat;
background-size: 100%;
background-clip: padding-box;
position: relative;
color: #fffdfd;
background-image: linear-gradient(90deg, #5b62e4, #34f2f5);
}
.original-knopka:before{content: "";
width: 100%;
height: 100%;
position: absolute;
top: 5px;
left: 5px;
border-radius: 50px;
z-index: -1;
filter: blur(14px); background-image: linear-gradient(90deg, #7b81ec, transparent);}
.original-knopka:after{content: "";
width: 100%;
height: 100%;
position: absolute;
top: 5px;
right: 5px;
border-radius: 50px;
z-index: -1;
filter: blur(14px);
background-image: linear-gradient(90deg, transparent, #3bd1d3);}
На этом все!
Демонстрация