Page 1 of 1

Putting It All Together - By Making A Button Rate Topic: ***** 2 Votes

#1 Shane Hudson  Icon User is offline

  • D.I.C Technophile
  • member icon

Reputation: 343
  • View blog
  • Posts: 1,286
  • Joined: 06-December 09

Posted 26 March 2011 - 08:34 AM

Putting It All Together

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

Is This A Good Question/Topic? 4
  • +

Replies To: Putting It All Together - By Making A Button

#2 paulc5629  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 25-March 11

Posted 15 May 2011 - 01:12 PM

Thanks for tutorial. Was really useful. Again THANKS.
Was This Post Helpful? 0
  • +
  • -

#3 RetardedGenius  Icon User is offline

  • >>──(Knee)──►
  • member icon

Reputation: 126
  • View blog
  • Posts: 555
  • Joined: 30-October 10

Posted 20 July 2011 - 10:37 AM

Very cool tutorial, I enjoyed following it and it proved a good learning exercise for me (it's been a few years now). I modified your code a little to make my own menu bar using a standard unordered list, http://jsfiddle.net/rnsJD/1/.

I really hope that the main browsers adopt the new features offered by HTML 5.0 and CSS 3.0 quickly, I think they're pretty awesome! :)
Was This Post Helpful? 0
  • +
  • -

#4 Shane Hudson  Icon User is offline

  • D.I.C Technophile
  • member icon

Reputation: 343
  • View blog
  • Posts: 1,286
  • Joined: 06-December 09

Posted 08 September 2011 - 07:08 AM

View PostRetardedGenius, on 20 July 2011 - 06:37 PM, said:

Very cool tutorial, I enjoyed following it and it proved a good learning exercise for me (it's been a few years now). I modified your code a little to make my own menu bar using a standard unordered list, http://jsfiddle.net/rnsJD/1/.

I really hope that the main browsers adopt the new features offered by HTML 5.0 and CSS 3.0 quickly, I think they're pretty awesome! :)


That looks fantastic, well done!

Most browsers do support it fairly well, apart from IE! I might make a few tutorials for the HTML5 Canvas tag soon.
Was This Post Helpful? 0
  • +
  • -

#5 RetardedGenius  Icon User is offline

  • >>──(Knee)──►
  • member icon

Reputation: 126
  • View blog
  • Posts: 555
  • Joined: 30-October 10

Posted 15 September 2011 - 01:41 PM

That'd be great Shane! :) I'm very happy to say that I just had one of my CSS tutorials accepted and I will contribute more as soon as I find the time (Work's pretty hectic at the moment!) I'll hopefully do some on Javascript and PHP as well.

This post has been edited by RetardedGenius: 15 September 2011 - 01:45 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1