Creating Buttons With CSS3
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: 0;
}
a.button2 {
font-family: arial;
font-size: 16px;
color: #0e0e0e;
text-shadow: none;
text-decoration: none !important;
padding: 2% 2%;
margin: 0 2%
}
a:hover.button2 {
color: #898989;
text-decoration: none;
box-shadow: 4px 4px 8px #0e0e0e inset;
border: solid #0e0e0e 1px;
border-radius: 0
}
We give you some basics here.
Got an imagination? See what you can do with CSS and your links.
Free Tools We Recommend
- Free Ebook How to Code in HTML5 and CSS3
- "How to Code in HTML5 and CSS3" is a free e-book about making websites in HTML5 and CSS for absolute beginners. It doesn't require any experience in IT to start....
- Free Logo Generator Turbologo.com
- If you are building a website for business you need to begin thinking about creating a brand identity. An unforgettable logo could be just the start you need. You can create it free at Turbologo.com. They also provide generators for business cards and letterheads.
- FREE HTML Editor (Windows): NoteTab Light
- All the features of a commercial HTML editor.
- FREE Apache Server (Windows): IndigoAmpp
- Set up a real time server environment right on your PC. Test forms and scripts before uploading to your web space.
- Linux Users
- If like us, you've left the insane world of Microsoft Windows for the even worse experience of Linux, we recommend the BlueFish HTML editor. You'll find it in your software repository. It does have some QUIRKS, but it's FREE.
- For image resizing we've found the easiest Linux tool to be Krita.