JSFiddle - React, Tailwind, and code Playground

by dkunin

HTML

<div class="hoveractive">
  <ul class="themenu">
  <li>Содержание</li>
  <li>Назад</li>
  <li>Вперед</li>
  </ul>
</div>

CSS

body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 100px;
  font-size: 13px;
}

.hoveractive{
  background: none;
  position:fixed;
  bottom:0px;
  left:0;
  width: 100%;
  height:100px;

}


.hoveractive:hover > .themenu{
  bottom:20px;
}
.themenu{
    -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 1s ease;
  list-style:none;
  position:absolute;
  bottom:-80px;
  left:0;
  width: 100%;
  height:50px;
  padding: 22px;
  text-align: left;
}

.themenu li{
      -webkit-transition: all 0.2s ease;
     -moz-transition: all 0.2s ease;
       -o-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
          transition: all 0.2s ease;
  float:left;
  background-color:#a9b8b0;
box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
  font-weight:bold;
  padding:25px 15px;
  margin-left:25px;
  color:#f7ffff;
  font-size:24px;
  font-family:Trebuchet MS;
  text-align:center;
    border: 0px solid #ccc;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius:25px;
  display:block;
  }
  
  .themenu  > li:hover{
color:white;
text-shadow: 0px 2px 2px rgba(0,0,0,0.2);
    cursor:pointer;
    margin-top:-5px;
  }

  .themenu  > li:active{

    text-shadow: 0px 0px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 0px rgba(0,0,0,0.5), 0px 0px 0px rgba(0,0,0,0.2);
    margin-top:0px;
  }