body{
    background:#000;
}
.row-wrapper{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap:15px;
    width:100%;
    margin:30px auto;
}
.row-wrapper button{
    flex:0 1 auto;
    width:150px;
    height:150px;
    border:0;
    cursor:pointer;
    transition: all .3ms ease-in-out;
    position: relative;
}
.row-wrapper button span{
    opacity: 0;
    position: absolute;
    left:0;
    display:block;
    text-align: center;
    width:100%;
    font-size:16px;
    font-weight:bold;
    color:#fff;
    font-family: 'Open Sans', sans-serif;
}
.row-wrapper:hover button{
    opacity: .5;
}
.row-wrapper:hover button:hover{
    opacity: 1;
}
.row-wrapper#circle-row button{
    border-radius: 100%;
}
.row-wrapper#circle-row button:hover span{
    opacity: 1;
    bottom:-20px;
}
.row-wrapper#square-row button:hover span{
    opacity: 1;
    top:-20px;
}

@media only screen and (max-width: 768px) {
    body {
        background:#fff;
    }
    .row-wrapper button span{
        color:#000;
    }
}