.Buttoncss {
    padding: 10px 15px;
    border: unset;
    border-radius: 5px;
    color: #ffffff;
    background: #258E2E;
    position: relative;
    font-weight: 500;
    font-size: 15px;
    box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
    transition: all 250ms;
    overflow: hidden;
    z-index: 1;
}

    .Buttoncss::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 0;
        border-radius: 5px;
        background-color: #015308;
        z-index: 0;
        box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
        transition: all 250ms;
    }

    .Buttoncss:hover {
        color: #ffffff;
    }

        .Buttoncss:hover::before {
            width: 100%;
        }



    .Buttoncss span,
    .Button2css span {
        position: relative;
        z-index: 1;
    }

/*Segundo button estilo*/
.Button2css {
    padding: 10px 15px;
    border: unset;
    border-radius: 5px;
    color: #ffffff;
    background: #016FB9;
    position: relative;
    font-weight: 500;
    font-size: 15px;
    box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
    transition: all 250ms;
    overflow: hidden;
    z-index: 1;
}

    .Button2css::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 0;
        border-radius: 5px;
        background-color: #004573;
        z-index: 0;
        box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
        transition: all 250ms;
    }

    .Button2css:hover { 
        color: #ffffff;
    }

        .Button2css:hover::before {
            width: 100%;
        }


.narrow-card {
    max-width: 330px;
}
