Okay, well you know html and CSS. But can you actually put it all together and make something that looks amazing? Possibly not! Well today is your lucky day, because I have compiled this tutorial for you to read. Well, mostly it is a collection of snippets... but I am here to help you understand what each part of it does!
Lets start with a very simple peice of html (this will exclude the base tags such as <head> and <body>):
<a href="#" class="button">Click Me!</a>
As you can see, this simple button is a link which is stylised using the "button" class. It is good practise to keep all CSS in an external file (often something like style.css or buttons.css depending on how large the site is).
To get started with stylising our button, we shall start with very little and slowly peice everything all together. Each version will be inline commented and have a link to jsFiddle to try it out.
Version 1 - Basic Button - http://jsfiddle.net/ShaneHudson/FefWc/
a.button {
font: 12px Hevetica, Arial, sans-serif; // This sets the text to 12 pixels in Helvetica (or Arial if Helvetica is not available)
text-decoration: none; // This removes the default underline
color: #1b749c; // This sets the text to a blue colour, rather than default purple
}
Version 2 - With Background - http://jsfiddle.net/...Hudson/FefWc/1/
a.button {
font: 12px Hevetica, Arial, sans-serif; // This sets the text to 12 pixels in Helvetica (or Arial if Helvetica is not available)
text-decoration: none; // This removes the default underline
color: #1b749c; // This sets the text to a blue colour, rather than default purple
background: #9fd8ef; // NEW: This sets the background colour to a light blue
padding: 15px 25px; // NEW: This adds padding around the text so that the background doesn't just look like a highlighter
border: 1px solid #04A5EA; // NEW: This adds a darker blue border, to section it off (borders are a very useful finishing touch)
}
Version 3 - A Touch of CSS3 - http://jsfiddle.net/...Hudson/FefWc/2/
a.button {
font: 12px Hevetica, Arial, sans-serif; // This sets the text to 12 pixels in Helvetica (or Arial if Helvetica is not available)
text-decoration: none; // This removes the default underline
color: #1b749c; // This sets the text to a blue colour, rather than default purple
background: #9fd8ef; // This sets the background colour to a light blue
padding: 15px 25px; // This adds padding around the text so that the background doesn't just look like a highlighter
border: 1px solid #04A5EA; // This adds a darker blue border, to section it off (borders are a very useful finishing touch)
-moz-border-radius: 4px; // NEW: Using the -moz- prefix, this adds a 4px border radius (rounded corner) on all corners in Firefox
-webkit-border-radius: 4px; // NEW: Same as above but for Webkit (chrome/safari)
-o-webkit-border-radius: 4px; // NEW: Same as above but for Opera
border-radius: 4px; // NEW: Same as above but for all browsers that support pure CSS3
-moz-box-shadow: 0 2px 2px #F7F9F9 inset; // NEW: Using the -moz- prefix, this adds a box shadow with no horizontal offset, 2px vertical offset and a 2px blur (this adds a sense of 3D to the button). Inset means it comes inside the box, rather than outside like a normal shadow.
-webkit-box-shadow: 0 2px 2px #F7F9F9 inset; // NEW: Same as above but for Webkit (chrome/safari)
-o-box-shadow: 0 2px 2px #F7F9F9 inset; // NEW: Same as above but for Opera
box-shadow: 0 2px 2px #F7F9F9 inset; // NEW: Same as above but for all browsers that support pure CSS3
}
Version 4 - CSS3 Gradient - http://jsfiddle.net/...Hudson/FefWc/4/
a.button {
font: 12px Hevetica, Arial, sans-serif; // This sets the text to 12 pixels in Helvetica (or Arial if Helvetica is not available)
text-decoration: none; // This removes the default underline
color: #1b749c; // This sets the text to a blue colour, rather than default purple
background: #9fd8ef; // This sets the background colour to a light blue
padding: 15px 25px; // This adds padding around the text so that the background doesn't just look like a highlighter
border: 1px solid #04A5EA; // This adds a darker blue border, to section it off (borders are a very useful finishing touch)
-moz-border-radius: 4px; // Using the -moz- prefix, this adds a 4px border radius (rounded corner) on all corners in Firefox
-webkit-border-radius: 4px; // Same as above but for Webkit (chrome/safari)
-o-webkit-border-radius: 4px; // Same as above but for Opera
border-radius: 4px; // Same as above but for all browsers that support pure CSS3
-moz-box-shadow: 0 2px 2px #F7F9F9 inset; // Using the -moz- prefix, this adds a box shadow with no horizontal offset, 2px vertical offset and a 2px blur (this adds a sense of 3D to the button). Inset means it comes inside the box, rather than outside like a normal shadow.
-webkit-box-shadow: 0 2px 2px #F7F9F9 inset; // Same as above but for Webkit (chrome/safari)
-o-box-shadow: 0 2px 2px #F7F9F9 inset; // Same as above but for Opera
box-shadow: 0 2px 2px #F7F9F9 inset; // Same as above but for all browsers that support pure CSS3
background: -moz-linear-gradient(top, #e4f5fc 0%, #2ab0ed 100%); // NEW: Using the -moz- prefix, this adds a linear gradient vertically
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f5fc), color-stop(100%,#2ab0ed)); // NEW: Using the -webkit- prefix (and you should note the different syntax), this adds a linear gradient vertically
}
Version 5 - Font Enhancement - http://jsfiddle.net/...Hudson/FefWc/5/
a.button {
font: 12px Hevetica, Arial, sans-serif; // This sets the text to 12 pixels in Helvetica (or Arial if Helvetica is not available)
text-decoration: none; // This removes the default underline
color: #1b749c; // This sets the text to a blue colour, rather than default purple
background: #9fd8ef; // This sets the background colour to a light blue
padding: 15px 25px; // This adds padding around the text so that the background doesn't just look like a highlighter
border: 1px solid #04A5EA; // This adds a darker blue border, to section it off (borders are a very useful finishing touch)
text-shadow: 0 1px 1px #BEDDEA; // NEW: This adds a very small shadow to the text, which makes it stand out a little better
font-weight: bold; // NEW: This makes it easier to read by being thicker
-moz-border-radius: 4px; // Using the -moz- prefix, this adds a 4px border radius (rounded corner) on all corners in Firefox
-webkit-border-radius: 4px; // Same as above but for Webkit (chrome/safari)
-o-webkit-border-radius: 4px; // Same as above but for Opera
border-radius: 4px; // Same as above but for all browsers that support pure CSS3
-moz-box-shadow: 0 2px 2px #F7F9F9 inset; // Using the -moz- prefix, this adds a box shadow with no horizontal offset, 2px vertical offset and a 2px blur (this adds a sense of 3D to the button). Inset means it comes inside the box, rather than outside like a normal shadow.
-webkit-box-shadow: 0 2px 2px #F7F9F9 inset; // Same as above but for Webkit (chrome/safari)
-o-box-shadow: 0 2px 2px #F7F9F9 inset; // Same as above but for Opera
box-shadow: 0 2px 2px #F7F9F9 inset; // Same as above but for all browsers that support pure CSS3
background: -moz-linear-gradient(top, #e4f5fc 0%, #2ab0ed 100%); // Using the -moz- prefix, this adds a linear gradient vertically
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f5fc), color-stop(100%,#2ab0ed)); // Using the -webkit- prefix (and you should note the different syntax), this adds a linear gradient vertically
}
Version 6 - User Interface Improvements - http://jsfiddle.net/...Hudson/FefWc/6/
This one may need a little explaining in regards to why it is important. Basically, the user needs to know where they are on the page and when they do something they expect to see a result. So this version adds the psuedo element of :hover so that the gradient changes when the mouse is hovered over. You may want to experiment with colours, this one seems a tad bit too subtle but it will do for the purposes of this tutorial. It also adds a little "jump" when it is :active, so the user knows it is has been clicked.
a.button {
font: 12px Hevetica, Arial, sans-serif; // This sets the text to 12 pixels in Helvetica (or Arial if Helvetica is not available)
text-decoration: none; // This removes the default underline
color: #1b749c; // This sets the text to a blue colour, rather than default purple
background: #9fd8ef; // This sets the background colour to a light blue
padding: 15px 25px; // This adds padding around the text so that the background doesn't just look like a highlighter
border: 1px solid #04A5EA; // This adds a darker blue border, to section it off (borders are a very useful finishing touch)
text-shadow: 0 1px 1px #BEDDEA; // NEW: This adds a very small shadow to the text, which makes it stand out a little better
font-weight: bold; // NEW: This makes it easier to read by being thicker
-moz-border-radius: 4px; // Using the -moz- prefix, this adds a 4px border radius (rounded corner) on all corners in Firefox
-webkit-border-radius: 4px; // Same as above but for Webkit (chrome/safari)
-o-webkit-border-radius: 4px; // Same as above but for Opera
border-radius: 4px; // Same as above but for all browsers that support pure CSS3
-moz-box-shadow: 0 2px 2px #F7F9F9 inset; // Using the -moz- prefix, this adds a box shadow with no horizontal offset, 2px vertical offset and a 2px blur (this adds a sense of 3D to the button). Inset means it comes inside the box, rather than outside like a normal shadow.
-webkit-box-shadow: 0 2px 2px #F7F9F9 inset; // Same as above but for Webkit (chrome/safari)
-o-box-shadow: 0 2px 2px #F7F9F9 inset; // Same as above but for Opera
box-shadow: 0 2px 2px #F7F9F9 inset; // Same as above but for all browsers that support pure CSS3
background: -moz-linear-gradient(top, #e4f5fc 0%, #2ab0ed 100%); // Using the -moz- prefix, this adds a linear gradient vertically
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f5fc), color-stop(100%,#2ab0ed)); // Using the -webkit- prefix (and you should note the different syntax), this adds a linear gradient vertically
}
a.button:hover{
background: -moz-linear-gradient(top, #F2F2F2 0%, #2ab0ed 100%); // NEW: You should note, this is the same as the initial gradient but with a lighter starting colour
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F2F2F2), color-stop(100%,#2ab0ed)); // NEW: You should note, this is the same as the initial gradient but with a lighter starting colour
}
a.button:active{
top: 1px; // This is the very simple css that makes the button be pressed/jump
position: relative; // This sets the positionin to relative so that the layouts are not mucked up
-moz-box-shadow: 0 2px 2px #B1E5F9 inset; // As with the inital box-shadow, this adds the element of 3D and being pressed (as it goes darker)
-webkit-box-shadow: 0 2px 2px #B1E5F9 inset;// As with the inital box-shadow, this adds the element of 3D and being pressed (as it goes darker)
}
Conclusion
Hopefully this has helped you understand how you can put together a nice looking html element by using a variety of pieces of CSS that you already know. I would appreciate your feedback and results. If you have an idea on another tutorial I could write that would benefit you, then let me know that too!
Good luck and have fun!
Shane
Resources
CSS3.Info - Box Shadow
My "Comprehensive" Guide To CSS3
MultiQuote
| 