button {
    margin: 2em auto;
    display: block;
    -webkit-appearance: none;
    border: 6px solid rgba(255, 255, 255, 0.45);
    border-radius: 50px;
    padding: 1em 3em;
    background-repeat: no-repeat;
    background-size: 100%;
    background-clip: padding-box;
    position: relative;
    color: #fff;
}
button:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 5px;
    left: 5px;
    border-radius: 50px;
    z-index: -1;
    filter: blur(14px);
}
button:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 5px;
    right: 5px;
    border-radius: 50px;
    z-index: -1;
    filter: blur(14px);
}

.button1 {
    background-image: linear-gradient(90deg, #8383a7, #4b54a6);
}
.button1:before {
    background-image: linear-gradient(90deg, #313184, transparent);
}
.button1:after {
    background-image: linear-gradient(90deg, transparent, #1b757e);
}

.button3 {
    background-image: linear-gradient(90deg, #8ce0f1, #79f391);
}
.button3:before {
    background-image: linear-gradient(90deg, #8ce0f1, transparent);
}
.button3:after {
    background-image: linear-gradient(90deg, transparent, #79f391);
}