Fun With CSS
Creating Buttons With CSS
The navigational system of your website is one of its most important features.
You can use simple hyperlinks.
You can use fancy 'Navbars' bult with Javascript.
You can use simple button images with your hyperlinks.
You can also create buttons using CSS and HTML code which mimic the mechanical aspects of Js navbars. And these won't slow your pages or create errors in browsers that don't support Js.
Most of the code is set up in the Style Sheets.
The Button
The HTML
<p><a href="" class="button">Button 1</a>
</p>
You can set static widths or for liquid, adjust the percentage according to available space.
Us your imagination on the colors and shadow changes.
The CSS
a.button {
width: 10%;
display: block;
float: left;
background: #ff9900;
box-shadow: -8px -8px 32px #990000 inset;
border: solid #990000 1px;
border-radius: 45px;
}
a.button {
font-family: arial;
font-size: 16px;
color: #ffffff;
text-decoration: none;
text-shadow: 1px 1px 1px #0e0e0e;
padding: .5% .5%;
margin: 0 .5%
}
a:hover.button {
color: #898989;
text-decoration: none;
box-shadow: -8px -8px 32px #0e0e0e inset;
border: solid #0e0e0e 1px;
}
The Button2
The HTML
<a href="" class="button2">Button 2</a>
You can set static widths or for liquid, adjust the percentage according to available space.
Us your imagination on the colors and shadow changes.
The CSS
a.button2 {
width: 80%;
display: block;
float: left;
background: #fefefe;
box-shadow: 4px 4px 8px #0e0e0e;
border: solid #0e0e0e 2px;
border-radius: 5px;
}
a.button2 {
font-family: arial;
font-size: 16px;
color: #0e0e0e;
text-shadow: none;
text-decoration: none;
padding: 2% 2%;
margin: 0 2%
}
a:hover.button2 {
color: #898989;
text-decoration: none;
box-shadow: 8px 8px 32px #0e0e0e inset;
border: solid #0e0e0e 1px;
}
We give you some basics here.
Got an imagination? See what you can do with CSS and your links.
Drop down navbars are here!!