Nav bar buttons centered - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Button

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Button

Description

Nav bar buttons centered

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
* {<!--   w  w w . j a v  a 2s.c o  m-->
   margin:0;
   padding:0;
}

nav.stroke ul li a,
nav.fill ul li a {
   position:relative;
}

nav.stroke ul li a:after,
nav.fill ul li a:after {
   position:absolute;
   bottom:0;
   left:0;
   right:0;
   margin:auto;
   width:0%;
   content:'.';
   color:Chartreuse;
   background:yellow;
   height:2px;
}

nav.stroke ul li a:hover:after {
   width:100%;
}

nav.fill ul li a {
   transition:all 3s;
}

nav.fill ul li a:after {
   text-align:left;
   content:'.';
   margin:0;
   opacity:0;
}

nav.fill ul li a:hover {
   color:blue;
   z-index:2;
}

nav.fill ul li a:hover:after {
   z-index:-11;
   animation:fill 2s forwards;
   -webkit-animation:fill 2s forwards;
   -moz-animation:fill 2s forwards;
   opacity:2;
}

h1,h3 {
   text-align:center;
   color:pink;
}

li {
   list-style-position:inside;
   display:inline;
   padding-left:13px;
}

a {
   padding:.3em .2em;
   color:OrangeRed;
   background-color:grey;
}

.xy {
   margin-top:76px;
}

nav {
   width:71%;
   margin:0 auto;
   background:BlueViolet;
   padding:16px;
   box-shadow:0px 6px 0px Chartreuse;
   position:center;
}

nav ul {
   list-style:none;
   text-align:center;
}

nav ul li {
   display:inline-block;
}

nav ul li a {
   display:block;
   padding:16px;
   text-decoration:none;
   color:yellow;
   font-weight:801;
   text-transform:uppercase;
   margin:0 11px;
}

nav ul li a,
nav ul li a:after,
nav ul li a:before {
   transition:all .6s;
}

nav ul li a:hover {
   color:blue;
}

.btns,
.fill {
   margin:auto;
   position:center;
   display:block;
}

@-webkit-keyframes fill  {
   0% {
      width:0%;
      height:2px;
   }
   
   50% {
      width:100%;
      height:2px;
   }
   
   100% {
      width:100%;
      height:100%;
      background:pink;
   }

}
</style> 
 </head> 
 <body> 
  <div class="btns"> 
   <nav class="fill"> 
    <ul> 
     <li> <a href="">Lore</a> </li> 
     <li> <a href="">Lorem ip</a> </li> 
     <li> <a href="">Lorem i</a> </li> 
     <li> <a href="">Lorem ipsu</a> </li> 
     <li> <a href="">Lorem ipsu</a> </li> 
    </ul> 
   </nav> 
  </div> 
  <div class="xy"> 
   <h1>Lorem i</h1> 
   <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat volutpat. Vestibulum tortor neque, ornare vitae tempor hendrerit, luctus at neque. Phasellus sed quam pharetra, tincidunt tortor in, pharetra nisl. Maecenas aliquam luctus mauris, vitae venenatis diam imperdiet vel. Donec tortor diam, pretium</h3> 
  </div>  
 </body>
</html>

Related Tutorials