JSFiddle - React, Tailwind, and code Playground
by luka kupunia
HTML
<div class="button">
save
<div class="anim"></div>
</div>
<div class="luka">
<div class="menu">home</div>
<div class="menu">about</div>
<div class="menu">work</div>
<div class="menu">contact</div>
<div class="menu">Github</div>
<div class="menu">Twitter</div>
</div>
<div class="luka1">
<div class="menu1">home</div>
<div class="menu1">about</div>
<div class="menu1">work</div>
<div class="menu1">contact</div>
<div class="menu1">Github</div>
<div class="menu1">Twitter</div>
</div>
CSS
div.button {
width: 60px;
padding: 7px 0;
text-align: center;
border: 1px solid transparent;
cursor: pointer;
position: relative;
top: 120px;
left: 100px;
border-radius: 5px;
background: #19B5FE;
color: #22313F;
color: white;
font-weight: bold;
user-select: none;
overflow: hidden;
z-index: 2;
}
div.anim {
width: 58px;
height: 34px;
background: linear-gradient(#22313F,#34495E);
opacity: 0.3;
position: absolute;
left: 0;
top: 0;
border-radius: 5px;
border: 1px solid transparent;
display: none;
animation: anim 0.1s;
animation-fill-mode: forwards;
z-index: 1;
}
@keyframes anim {
from { transform: scale(0.5); }
to { transform: scale(1); }
}
div.button:active div.anim {
display: block;
}
div.luka {
width: 420px;
position: absolute:
left:0;
top:0;
}
div.menu {
width: 70px;
float: left;
text-align: center;
padding: 10px;
background: linear-gradient(rgb(17,91,116),rgb(135,197,218));
color: black;
cursor: pointer;
transition: 0.3s;
}
div.menu:hover {
background: linear-gradient(#9A12B3,#663399);
color: white;
background: rgb(228,150,0);
}
*{
box-sizing: border-box;
}
body {
margin: 0;
}
div.luka1 {
width: 420px;
position: absolute;
top: 75px;
left: 0;
}
div.menu1 {
width: 70px;
float: left;
text-align: center;
padding: 10px;
background: linear-gradient(rgb(142,210,201),rgb(252,244,217));
color: black;
cursor: pointer;
transition: 0.3s;
}
div.menu1:hover {
background: linear-gradient(#9A12B3,#663399);
color: white;
background: rgb(70,32,102);
}