*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

img{
border-radius: 10px;
box-shadow: 10px 10px 10px rgba(0,0,0,0.6);
}

.banner{  
    width: 100%;
    height: 500vh;
    background-image: linear-Gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)), url(pexels-johannes-plenio-1103970.jpg);
    background-color: rgb(71, 68, 68);
    color: white;
    background-size: cover;
    background-position: center; }

    button{
        width:200px;
        padding: 15px 0;
        text-align: center;
        margin: 20px 10px;
        border-radius: 25px;
        font-weight: bold;
        border: 2px solid #009688;
        background: transparent;
        color: #fff;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }   
span{
        background: #009688;
        height: 100%;
        width: 0%;
        border-radius:25px;
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: -1;
        transition: 0.5s;}


            button:hover span{
                width: 100%;
            }
            button:hover{ 
                border: none;
            }   
            .content{
                transform: translateY(-50%);
            }