﻿
.button-rounded-hover {
    border: 0;
    border-radius: 5000px;
    padding: 1rem 2rem;
    position: relative;
    overflow: hidden;
    transition: all 0.35s ease;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    background-color: #4a6374;
    font-size: 0.8rem;
}

    .button-rounded-hover:before {
        opacity: 0;
        content: "";
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        border-radius: inherit;
        background-color: #fefefe;
        transition: all 0.3s;
        -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        transform: translateX(-100%);
    }

    .button-rounded-hover:after {
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        border: 2px solid #fefefe;
        content: '';
        border-radius: inherit;
    }

    .button-rounded-hover:hover,
    .button-rounded-hover:focus {
        background-color: #4a6374;
    }

        .button-rounded-hover:hover:before,
        .button-rounded-hover:focus:before {
            -webkit-transform: translateX(0%);
            -ms-transform: translateX(0%);
            transform: translateX(0%);
            opacity: 0.25;
        }

@media screen and (max-width: 39.9375em) {
    .button-rounded-hover {
        transition: all 0.6s ease;
    }

        .button-rounded-hover:before {
            transition: all 0.5s;
        }
}