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;
}
The Top Button
The trend in web design today seems to have moved to long scrolling pages rather than multiple pages that require clicking. Some are even telling us that the click is dead. Personally, I believe we'll end up with a combination of the two.
Enter The Top Button and The Up Button
I can't imagine what a nightmare these endlessly scrolling pages of 10000+ words are for SEO!! May be the reason you don't see these Magnificent Masterpieces in the SERPS. Pay Google or sink into the BLACK HOLE!
Very Basic HTML
<p><a href="#heading" class="top-button">Top</a></p> Specify the location you want to jump to like so: <header id="heading">
💡 Time Out for a teaching Moment
In CSS, the !important declaration is used to give a specific style rule the highest priority, overriding any other conflicting rules, regardless of specificity or source order. It ensures that the style is applied no matter what.(From Copilot)
We use it in the CSS on the right (once again because I'm LAZY) to override the settings for the anchor tags in the main division.
The CSS
p a.top-button {
width: 40px;
color: #fff !important;
background: #0066cc;
box-shadow: 2px 2px 4px #000;
border: none;
border-radius: 90%;
margin: 0 auto
}
p a.top-button {
font-family: Roboto , arial;
font-size: 18px;
text-align: center;
font-weight: bold;
text-shadow : 1px 1px 1px #000;
text-decoration: none;
padding: 1.5% 1%;
}
p a:hover.top-button {
color: #000 !important;
background-color: #fff;
box-shadow: 2px 2px 6px #000 inset;
text-shadow:none;
border: none;
}
The HTML Code using a Winding
<p> <a href="#heading" style="text-decoration: none" title="Go To Top"> <span style="font-size :50px; text-shadow: 1px 1px 2px #000">👆 </span><a> </p>
or 🔝 Wingding: 🔝
The Up Button
You could convert the Top button to an Up button and place your destination tags at various desired page break points. The CSS would be the same.
<p><a href="#pagebreak1" class="top-button">Up </a></p> Specify the location you want to jump to like so: <h2 id="pagebreak1">The Button 2
The Go Back Button
Hey! Search for days and you won't find this one.
Here we use the button tag with a Wingding and just a smidge of javascript.
Go Back buttons are active. Use Forward arrow to return.
The HTML
<p class="goback"> <button title="Go Back" onclick="history.back()"> <span>👈</span> </button> </p>
or
Wingding: 🔙
The CSS
p.goback button {
border:none;
background: transparent;
padding: 0 0; margin: 0 0
}
p.goback button span {
font-size :50px;
text-shadow: 1px 1px 2px #000;
padding: 0 0 ;
margin: 0 0
}
Here we use the button tag with an image and the same smidge of javascript.
Go Back buttons are active. Use Forward arrow to return.
The HTML
<p class="goback"> <button title="Go Back" onclick="history.back()"> <img src="bullets/arrowbluel.gif" alt="Free bullets for web pages"> </button> </p>
The CSS
p.goback button {
border:none;
background: transparent;
padding: 0 0; margin: 0 0
}
p.goback button img {
width :50px;
box-shadow: none;
padding: 0 0 ;
margin: 0 0
}
Free Tools and Resources
Have you found Thiings yet?.
Over 6000 Free 3D images that you can download (individually or the complete set) and use for personal or commercial projects. You have got to SEE this!!
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!