::selection {
    color: white;
    background-color: green;
}

button {
    position: relative;
    font-size: 14px;
    font-weight: bold;
    height: 38px;
    padding:8px;
    background: white;
    overflow: hidden;
    border-radius: 50px;
    border: 2px solid;
    color: #334b79;
    z-index: 1;
    transition: 0.5s all ease;
}

    button:hover {
        color: white;
        cursor: pointer;
        border: 0px;
    }

    button:active {
        transform: scale(0.85);
    }

    button:before {
        content: "";
        width: 50%;
        height: 100%;
        margin: auto;
        position: absolute;
        top: 0%;
        left: -50%;
        top: -100%;
        background: #379237;
        transition: all 0.6s ease;
        z-index: -1;
    }

    button:hover:before {
        top: 0;
        left: 0;
        border: 0px;
        transform: rotate(180deg);
    }

    button:after {
        content: "";
        width: 50%;
        height: 100%;
        margin: auto;
        position: absolute;
        top: 0%;
        left: 100%;
        top: 100%;
        background: #54B435;
        transition: all 0.6s ease;
        z-index: -1;
    }

    button:hover:after {
        top: 0;
        left: 50%;
        border: 0px;
        transform: rotate(180deg);
    }

a.btn {
    position: relative;
    font-size: 14px;
    font-weight: bold;
    height: 38px;
    padding: 8px;
    background: white;
    overflow: hidden;
    border-radius: 50px;
    border: 2px solid;
    color: #334b79;
    z-index: 1;
    transition: 0.5s all ease;
}

    a.btn:hover {
        color: white;
        cursor: pointer;
        border: 0px;
    }

    a.btn:active {
        transform: scale(0.85);
    }

    a.btn:before {
        content: "";
        width: 50%;
        height: 100%;
        margin: auto;
        position: absolute;
        top: 0%;
        left: -50%;
        top: -100%;
        background: #379237;
        transition: all 0.6s ease;
        z-index: -1;
    }

    a.btn:hover:before {
        top: 0;
        left: 0;
        border: 0px;
        transform: rotate(180deg);
    }

    a.btn:after {
        content: "";
        width: 50%;
        height: 100%;
        margin: auto;
        position: absolute;
        top: 0%;
        left: 100%;
        top: 100%;
        background: #54B435;
        transition: all 0.6s ease;
        z-index: -1;
    }

    a.btn:hover:after {
        top: 0;
        left: 50%;
        border: 0px;
        transform: rotate(180deg);
    }


label.btn {
    position: relative;
    font-size: 14px;
    font-weight: bold;
    height: 38px;
    padding: 8px;
    background: white;
    overflow: hidden;
    border-radius: 50px;
    border: 2px solid;
    color: #334b79;
    z-index: 1;
    transition: 0.5s all ease;
}

    label.btn:hover {
        color: white;
        cursor: pointer;
        border: 0px;
    }

    label.btn:active {
        transform: scale(0.85);
    }

    label.btn:before {
        content: "";
        width: 50%;
        height: 100%;
        margin: auto;
        position: absolute;
        top: 0%;
        left: -50%;
        top: -100%;
        background: #379237;
        transition: all 0.6s ease;
        z-index: -1;
    }

    label.btn:hover:before {
        top: 0;
        left: 0;
        border: 0px;
        transform: rotate(180deg);
    }

    label.btn:after {
        content: "";
        width: 50%;
        height: 100%;
        margin: auto;
        position: absolute;
        top: 0%;
        left: 100%;
        top: 100%;
        background: #54B435;
        transition: all 0.6s ease;
        z-index: -1;
    }

    label.btn:hover:after {
        top: 0;
        left: 50%;
        border: 0px;
        transform: rotate(180deg);
    }