DrWolfgangVonBubbles
03-19-2005, 12:05 PM
Contents (not that they are really necessary…)
1. Contents
2. Introduction
3. Type A
4. Type B
5. Example
6. Closing
_-_-_-_-_-_
Introduction
In this tutorial, I will attempt to teach you how to use CSS to make button links. If you know the basics of CSS, this will be much easier to use.
_-_-_-_-_-_
Type A
You will want to use this type if you want to be able to change any link into a button.
Firstly, add the following CSS to either your style sheet or in the head of your document between the style tags.
-------------
a.button {
padding: 4px 8px;
border-top: 1px solid white;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid white;
text-align: center;
min-width: 75px;
color: #FFFFFF;
background-color: #111111;
text-decoration: none
}
a.button:hover {
text-decoration: underline;
border-color: black white white black
}
a.button:active {
background-color: #AA0000
}
a.button:visited {
color: #AAAACC
}
-------------
Change the colors to suit your needs.
Then, to apply it to a link add the following.
-------------
<a href="http://www.somewhere.com" class="button">Link</a>
-------------
_-_-_-_-_-_
Type B
You will want to use this type if you have an existing style sheet and want to make all of the links in a div buttons.
It is the same thing as the above except for a few minor changes. Where you see a.button, a.button:link, etc. You want to change them to menu#a, menu#a:link, etc. Change "menu" to whatever the name of your current div is.
To apply your link you would use the following instead.
-------------
<div id="menu">
<a href="http://www.somewhere.com">Link 1</a> <a href="http://www.somewhere.com">Link 2</a> <a href="http://www.somewhere.com">Link 3</a>
</div>
-------------
_-_-_-_-_-_
Example
To view an example of the button in use or just to see what it would look like go to http://unibrowinc.hostmatrix.org/button.html .
_-_-_-_-_-_
Closing
I hope you have found this helpful. If you find any errors or something isn’t clear, feel free to contact me. If you tell me about it, I may be able to revise it to make it more helpful to others.
1. Contents
2. Introduction
3. Type A
4. Type B
5. Example
6. Closing
_-_-_-_-_-_
Introduction
In this tutorial, I will attempt to teach you how to use CSS to make button links. If you know the basics of CSS, this will be much easier to use.
_-_-_-_-_-_
Type A
You will want to use this type if you want to be able to change any link into a button.
Firstly, add the following CSS to either your style sheet or in the head of your document between the style tags.
-------------
a.button {
padding: 4px 8px;
border-top: 1px solid white;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid white;
text-align: center;
min-width: 75px;
color: #FFFFFF;
background-color: #111111;
text-decoration: none
}
a.button:hover {
text-decoration: underline;
border-color: black white white black
}
a.button:active {
background-color: #AA0000
}
a.button:visited {
color: #AAAACC
}
-------------
Change the colors to suit your needs.
Then, to apply it to a link add the following.
-------------
<a href="http://www.somewhere.com" class="button">Link</a>
-------------
_-_-_-_-_-_
Type B
You will want to use this type if you have an existing style sheet and want to make all of the links in a div buttons.
It is the same thing as the above except for a few minor changes. Where you see a.button, a.button:link, etc. You want to change them to menu#a, menu#a:link, etc. Change "menu" to whatever the name of your current div is.
To apply your link you would use the following instead.
-------------
<div id="menu">
<a href="http://www.somewhere.com">Link 1</a> <a href="http://www.somewhere.com">Link 2</a> <a href="http://www.somewhere.com">Link 3</a>
</div>
-------------
_-_-_-_-_-_
Example
To view an example of the button in use or just to see what it would look like go to http://unibrowinc.hostmatrix.org/button.html .
_-_-_-_-_-_
Closing
I hope you have found this helpful. If you find any errors or something isn’t clear, feel free to contact me. If you tell me about it, I may be able to revise it to make it more helpful to others.