Web Development Network  |  Sites:    Capital Tutorials    Internet Marketing Books    Arcade Games
Depiction- Webmaster Resources
Stock Image


Contributors: SSD VPS in Europe  |  SEO Las Vegas |  EsqRank

Dental SEO Marketing  |  Best Las Vegas SEO Company  |  Currency Converter Live

Misc Links: Submit Tutorials (Earn $$) l Advertising l Privacy Policy | Site Map

Tutorials > CSS > Buttons

 

Create trendy css buttons with absolutely no graphics.


In order to understand this tutorial best, it is preferable that you are familiar with CSS and HTML. However, it is not required.

1. First, start off with a blank web page. Set up your web page with all the necessary tags.

2. Next, download this file. (We'll edit the file so it fits your needs later.)

3. Now you will make an Organized List. This is to call the css file.

Code:
------------------------------------------------------------------------
<ul id="nav">
<li><a href="www.depiction.net">Depiction</a></li>
</ul>
------------------------------------------------------------------------

4. Once you have typed this into your page's code you should call your css file.

Code:
------------------------------------------------------------------------
<link rel="stylesheet" type="text/css" href="menu.css">
------------------------------------------------------------------------

5. The default is set to something like this:

6. The current css file should contain the following code:

Code:
------------------------------------------------------------------------
#nav ul, #nav li {
display: inline;
list-style-type: none;
}

#nav a, #nav a:link {
background: #C0C0C0;
border: 1px dotted #000000;
color: #000000;
display: inline;
line-height: 22px;
text-decoration: none; font-style:normal; font-variant:normal; font-weight:bold; font-size:10px; font-family:verdana, arial, sans-serif; margin-left:2px; margin-right:0; margin-top:0; margin-bottom:0; padding-left:3px; padding-right:3px; padding-top:2px; padding-bottom:2px
}

#nav a:hover {
background: #C0C0C0;
border: 1px solid #990033;
}

#nav a.active, .nav a:link.active, .nav a:hover.active {
background: #fff;
border: 1px solid #520;
border-left: 5px solid #520;
color: #000; }
------------------------------------------------------------------------

7. From here on out it should be pretty easy to edit. Just download the menu.css file and your good to go.

Example:

Tutorial Submitted by: Jonathan Calderon

 
 

Affiliates

Tutorial Stream Photoshop Tutorials
Tutorial Man Wallpaper Stock  More

Resources