Можно только на css html вот код :
<style>
.saitbar {
width:90%;
height:100%;
background: #f0f0f0;
transform: translateY(-100%);
transition: 0.5s;
position:absolute;
top:0px;
left:10%;
}
.saitbar1 {
width:90%;
height:100%;
background:red;
transform: translateY(-100%);
transition: 0.5s;
position:absolute;
top:0px;
left:10%;
}
.saitbar2 {
width:90%;
height:100%;
background:green;
transform: translateY(-100%);
transition: 0.5s;
position:absolute;
top:0px;
left:10%;
}
.button:hover .saitbar{
transform: translateY(0);
}
.button:hover .saitbar1{
transform: translateY(0);
}
.button:hover .saitbar2{
transform: translateY(0);
}
.button{
width:50px;
height:50px;
background-color:#494949;
border-radius:25px;
margin-top:30px;
}
body{
color:#494949;
font-size:40px;
font-family:Arial;
}
</style>
<body>
<div class="button">
<div class="saitbar">привет</div>
</div>
<div class="button">
<div class="saitbar1">как дела</div>
</div>
<div class="button">
<div class="saitbar2">привет , мир</div>
</div>
</body>
Простой
Средний
