JSFiddle - React, Tailwind, and code Playground

by Cem Firat

HTML

<button class="projb" id="aw" onclick="ww()">🌎 7 Wonders 🌏</button>
<button class="projb" id="sa" onclick="sa()">🐼 Save animals 🐨</button>

CSS

#sa:hover {
    background-color:burlywood;
} 
#aw:hover {
    background-color:black;
}
.projb {
    margin-top: 100px;
    font-family: Lora, "serif";
    font-size: 29px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    width: 24.5%;
    height: 400px;
}

.projb:hover {
    -webkit-transform: translate(0px, -10px);
    -moz-transform: translate(0px, -10px);
    -ms-transform: translate(0px, -10px);
    -o-transform: translate(0px, -10px);
    transform: translate(0px, -10px);
}