CSS Tutorials


Creating Button Style Navigation


Step One
Create HTML file


For the biggining open your favorite text editor and create simple html file as you can see on the image below.
Once you have created a file save it as html file.


Navigation Button With CSS

Once you are done with your html file you should see something like this in your browser.



Step Two
Start with creating CSS document


Open your Notepad and for the bigining we are going to defin #navbar div.
Write your code as shown on image below.


Navigation Button With CSS

If you did everything right your navbar soppouse to look like this.



Step Three
Continue with CSS


In this step we will define #navbar ul and #navbar li divs.
Write your code as shown on image below.


Navigation Button With CSS

If you did everything right your navbar soppouse to look like this.



Step Four
Final Step


Now for the final step let's make this links looks like buttons.
Write this code on your notepad and save it like navstyle.css.


Navigation Button With CSS

Now let see what we have done.


SPONSORS


Copyright © 2006 - 2012 By Get CSS Templates | Web design provided by Get Free Website Design and CSS Templates