Creating navigation buttons in CSS

you can create CSS buttons in many ways, but here i am explaining about making navigation buttons using bullets.It mainly have 2 parts create bullet and apply CSS to it.

bullet

<div id="nav">
   <ul>
      <li class="active">
        <a href="#">Home</a>
      </li>
      <li>
        <a href="#">Service</a>
      </li>
      <li>
        <a href="#">About</a>
      </li>
      <li>
        <a href="#"> Contact</a>
      </li>
   </ul>
</div>

you can replace # with your link.

CSS

#nav ul
{
   list-style: none;
}

#nav li
{
   display: block;
   float: left;
   margin: 10px;
   padding: 5px;
   color: #CCC;
}

#nav li a
{
   text-decoration: none;
   color: #AAA;
   font-weight: bold;
}

#nav li.active a
{
   color: #D81921;
}
#nav li a:hover

{
   color: #D81921;
   text-shadow: 10px 10px 5px #aaaaaa;
}

we have a lot of possibilities in CSS to make this menu more beautiful.

if you like this post please put comments