Barra ModerUI con css3

barra moderUI con css3

by JavaFace

HTML

<div class="texto">
    Mueve el Mouse ala esquina Derecha
</div> 

<ul class="barra_modernUI right">
 <li class="admin"><span class='nomb_admin'>Admin</span></li>
 <li class="refrescar"><a href="#">refrescar</a></li>
 <li class="atras"><a href="#">Atras</a></li>
 <li class="siguiente"><a href="#">Siguiente</a></li>
</ul>

CSS

body{
background: #186185 url(https://sites.google.com/site/javafaceblogger/fileblogger/gradientblue_img.svg) 50% 50% fixed;
background-size: 100% 100%;
}
.texto{
position:relative;
width:350px;
margin:15% auto;
padding:25px 25px 25px 25px;
color:#ffffff;
font-family: "Segoe UI",arial,helvetica;
font-size: 35px;
background-color: #232323;
}

.barra_modernUI {
background-image: url(http://2.bp.blogspot.com/-iCCUn-fktvk/UYVomjPC84I/AAAAAAAAAAc/czlS_SMG-rs/s1600/noise.png), linear-gradient(to right, #000000, #000000);
bottom: 0;
list-style: none outside none !important;
margin: 0 !important;
padding: 20px 0 0 !important;
position: fixed;
top: 0;
transition: all 0.2s linear 0s;
-moz-transition: all 0.2s linear 0s;
-webkit-transition: all 0.2s linear 0s;
-o-transition: all 0.2s linear 0s;
width: 76px;
opacity:0;
}
.barra_modernUI.left {left: -60px;}
.barra_modernUI.left:hover {left: 0;}
.barra_modernUI.right {right: -60px;}
.barra_modernUI.right:hover {right: 0;}
 
.barra_modernUI:hover {
 right:0;
 opacity:1;
}
.barra_modernUI > li {
background-position: 50% 10px;
background-repeat: no-repeat;
cursor: pointer;
height: 84px;
position: relative;
text-align: center;
}
.barra_modernUI li > a {
color: #FFFFFF;
display: block;
font-family: "Segoe UI",arial,helvetica;
font-size: 11px;
line-height: 1.2 !important;
padding: 61px 0 10px;
text-decoration: none;
}

.nomb_admin{
position:relative;
width:90%;
float:left;
top:75%;
color: #ffffff;
padding:4px 4px 4px 4px;
font-family: "Segoe UI",arial,helvetica;
font-size: 11px;
background-color:#e214ea;
}
.barra_modernUI > li.admin {
 background-image:url("https://lh6.googleusercontent.com/-WW0WMiQnvvY/Ua_d102tz6I/AAAAAAAAF3w/Key1-_VRuus/s176-no/30754_421559121243112_310972398_n.jpg");
 background-position:0px top;
 background-size:100% 100%;
}

.barra_modernUI > li.refrescar {
 background-image:url("https://lh4.googleusercontent.com/-A3j9EOfDzQ4/UZ542-ha8ZI/AAAAAAAAFL4/WXPWmuZYGB8/s1600/refrescar.png");
}

.barra_modernUI >...