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
