.btnn{
    background-color: var(--background-color);
    color:rgb(104, 104, 104);
    padding: .5em 1em;
    

    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
    border: 2px solid var(--accent-color);
    outline: none;
    position: relative;
    cursor: pointer;
    --background-color: white;
    --border-size:2px;
    --accent-color:#42C2FF
}

.btnn.btnn-slide::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    z-index:-1;
    background-color: var(--accent-color);
    transition:transform 300ms ease-in-out;
    transform: scaleX(0);
    transform-origin: left;
}

.btnn.btnn-slide:hover::before,
.btnn.btnn-slide:focus::before{
    transform: scaleX(1);
}

.btnn.btnn-slide{
    transition: color 300ms ease-in-out;
    z-index: 1;
}

.btnn.btnn-slide:hover,
.btnn.btnn-slide:focus {
    color:white;
}