Здесь представлен дизайн, который содержат градиент, а также тени. Что отлично подойдет под кнопки любой тематики, так как самостоятельно можно изменить цветовую гамму, которая соответствует сайту.

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);}
На этом все!
Демонстрация