.s_button1{
    position: relative;
    overflow: hidden;
}
.s_button1:before {
    content: "";
    position: absolute;
    display: block;
    transition: all .6s;
    width: 100%;
    height: 0;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    padding-top: 100%;
    transform: translateX(-50%) translateY(-50%)
}
.s_button1:hover:before {
    animation: style1 .75s;
    z-index: 1;
}
@keyframes style1 {
    0% {
        background: rgba(0,0,0,.25);
        transform: translateX(-50%) translateY(-50%) scale(0)
    }
    to {
        background: transparent;
        transform: translateX(-50%) translateY(-50%) scale(1)
    }
}

.s_button3{
    position: relative;
    overflow: hidden;
    background-color: #fff;
    opacity: 1;
    color: #333;
    border: solid 1px rgba(64, 158, 244, 1);
}
.s_button3:hover {
    color: #fff;
    background-color: #66b1f6;
}

.s_button4{
    position: relative;
    overflow: hidden;
    background-color: #fff;
    opacity: 1;
    color: #333;
    border: solid 1px rgba(64, 158, 244, 1);
}
.s_button4::after {
    opacity: 1;
    width: 0
}
.s_button4:hover{
    color: #fff;
}
.s_button4:hover::after {
    width: 100%;
    background-color: rgba(64, 158, 244, 1);
}