How to Create a Button in HTML/CSS 🔘
The navigational system of your website is one of its most important features.
You can use simple hyperlinks.
You can use fancy 'Navbars' built with Javascript.
You can use simple button images with your hyperlinks.
You can also create buttons using CSS and HTML5 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</a></p>
Size is determined by size of text and padding.
Us your imagination on the colors and shadow changes.
The CSS
.left p a.button {
text-align:center;
padding: 10px 20px !important;
background-color: #ff9900;
box-shadow: -4px -4px 8px #000 inset;
border: solid #000 1px;
border-radius: 45px;
}
.left p a.button {
font-family: arial;
font-weight: bold;
font-size: 20px;
color: #fff !important;
text-decoration: none;
text-shadow: 1px 1px 1px #000;
margin: 0 0
}
.left p a:hover.button {
font-weight:normal;
background-color: #eee;
color:#000 !important;
text-decoration: none;
box-shadow: 4px 4px 10px #000 inset;
text-shadow:none;
border: solid #0e0e0e 1px;
}
The Button2
The HTML
<a href="" class="button2">Button 2</a>Size is determined by size of text and padding.
Us your imagination on the colors and shadow changes.
The CSS
a.button2 {
background: #eee;
box-shadow: 4px 4px 8px #000;
border: solid #0000 2px;
}
a.button2 {
font-family: arial;
font-size: 20px;
text-align:center;
color: #000;
text-shadow: none;
text-decoration:none;
padding: 10px 20px;
}
a:hover.button2 {
color: #696969;
text-decoration: none;
box-shadow: 4px 4px 8px #000 inset;
border: solid #000 1px;
}
We give you some basics here.
Got an imagination? See what you can do with CSS and your links.
Free Tools and Resources
Free Bullet Images, WingDings and WebDings
🔵 🔶 😀 🎈 🐝 🏀 👉 👲 💡 🍅
Have you tried our NEWEST template kit with scrolling columns? Download Template Kit #601 - 4 Page Kit or Test Drive It!