Warning: Table './db79366_designmess/sessions' is marked as crashed and should be repaired query: SELECT u.*, s.* FROM users u INNER JOIN sessions s ON u.uid = s.uid WHERE s.sid = '2465d9709b567009d43de49359df17c5' in /nfs/c05/h04/mnt/79366/domains/designmess.com/html/includes/database.mysqli.inc on line 128

Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers already sent (output started at /nfs/c05/h04/mnt/79366/domains/designmess.com/html/includes/database.mysqli.inc:128) in /nfs/c05/h04/mnt/79366/domains/designmess.com/html/includes/bootstrap.inc on line 1037

Warning: Cannot modify header information - headers already sent by (output started at /nfs/c05/h04/mnt/79366/domains/designmess.com/html/includes/database.mysqli.inc:128) in /nfs/c05/h04/mnt/79366/domains/designmess.com/html/includes/bootstrap.inc on line 636

Warning: Cannot modify header information - headers already sent by (output started at /nfs/c05/h04/mnt/79366/domains/designmess.com/html/includes/database.mysqli.inc:128) in /nfs/c05/h04/mnt/79366/domains/designmess.com/html/includes/bootstrap.inc on line 637

Warning: Cannot modify header information - headers already sent by (output started at /nfs/c05/h04/mnt/79366/domains/designmess.com/html/includes/database.mysqli.inc:128) in /nfs/c05/h04/mnt/79366/domains/designmess.com/html/includes/bootstrap.inc on line 638

Warning: Cannot modify header information - headers already sent by (output started at /nfs/c05/h04/mnt/79366/domains/designmess.com/html/includes/database.mysqli.inc:128) in /nfs/c05/h04/mnt/79366/domains/designmess.com/html/includes/bootstrap.inc on line 639
Creating Awesome Buttons with CSS and Image Sprites | [field_tutorial_category-term] | Designmess

Creating Awesome Buttons with CSS and Image Sprites

Submitted by Sean Geng on January 2, 2010 - 5:43pm

Styling your buttons can make a huge difference for your users. In user interface design, buttons should be noticeable and properly styled. You wouldn't want your users to have a hard time finding a submit or login button would you?

In this tutorial, we cover how to design a button without any javascript, or extra HTML markup. Using image sprites and some CSS, we can create some pretty awesome buttons which have three states.

Step 1

First, we need to begin by creating the image sprite that will serve as the background for the button. Open up an image editor of your choice, and create an gradient (going vertically) image of your choosing. Make this image approximately 80px high. Next create an image that is the inverse gradient (just flip it upside down) of the first. Finally combine these two images and crop the width to 10px.

Standard Gray Images

Green Button Images

Step 1.5

We need to do something else if you are interested in making a button with a point. Create an image of a button with a point. The image should have a width of at least 400px. Make three different images of both the default, hover, and pressed states, and combine them into one image.

Creating Pointed Buttons

Step 1.9

What if you want to create a button that's customizable? You can create a gradient similar to the first step, but make it light gray and transparent. Then create an inverse of that and combine the two images. Make sure to render the image as a PNG with the alpha channel on.

Step 2 - The HTML

Now that we have the images we need, lets lay down the HTML. This is relatively easy. Just add a class to an <a> tag or a <input> tag. We will be creating a class for each of the types.

  1. <a href="http://yourdomain.com" class="gray-btn">Click Me</a>
  2. <a href="http://yourdomain.com" class="green-btn">Submit</a>
  3. <a href="http://yourdomain.com" class="arrow-btn">Next Page</a>

Step 3 - The CSS

Now that we have added the necessary classes to our links, we need to style the buttons with CSS. Lets start with the gray buttons.

Gray Buttons

Here is the code for the gray buttons, of course you are encouraged to modify it and suit it to your own needs.

  1. .gray-btn {
  2. 	display: inline-block;
  3. 	background: transparent url(img/btn-grey.png) repeat-x 0 0;
  4. 	border: 1px solid #848484;
  5. 	-moz-border-radius: 6px;
  6. 	-webkit-border-radius: 6px;
  7. 	border-radius: 6px;
  8. 	-khtml-border-radius: 6px;
  9. 	padding: 4px 6px;
  10. 	margin: 4px 0;
  11. 	color: #242424;
  12. 	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  13. 	text-decoration: none;
  14. 	font-weight: bold;
  15. 	font-size: 18px;
  16. 	text-shadow: 0 -1px #DDDDDD;
  17. 	line-height: 18px;
  18. 	cursor: pointer;
  19. 	letter-spacing: -1px; /* Optional- Remove if you don't like it */
  20. }
  21.  
  22. .gray-btn:hover {
  23. 	background: transparent url(img/btn-grey.png) repeat-x 0 -15px; /* Adjust this value accordingly, the lower it goes, the darker the hover state.  Do not go past -80px */
  24. }
  25.  
  26. .gray-btn:active {
  27. 	background: transparent url(img/btn-grey.png) repeat-x 0 -120px; /* Adjust this value accordingly, the lower it goes, the lighter the pressed state.  Do not go past -140px */
  28. 	text-shadow: 0 1px #999999;
  29. 	outline: none;
  30. }

Green Buttons

The code for the green buttons is similar to the gray buttons. If you want to create a button of a different color, its very easy to modify this.

  1. .green-btn {
  2. 	display: inline-block;
  3. 	background: transparent url(img/btn-green.png) repeat-x 0 0;
  4. 	border: 1px solid #1C3600;
  5. 	-moz-border-radius: 12px;
  6. 	-webkit-border-radius: 12px;
  7. 	border-radius: 12px;
  8. 	-khtml-border-radius: 12px;
  9. 	padding: 4px 8px;
  10. 	margin: 4px 0;
  11. 	color: #213E01;
  12. 	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  13. 	text-decoration: none;
  14. 	font-weight: bold;
  15. 	font-size: 18px;
  16. 	text-shadow: 0 -1px #6FD700;
  17. 	line-height: 18px;
  18. 	cursor: pointer;
  19. 	letter-spacing: -1px; /* Optional- Remove if you don't like it */
  20. }
  21.  
  22. .green-btn:hover {
  23. 	background: transparent url(img/btn-green.png) repeat-x 0 -15px; /* Adjust this value accordingly, the lower it goes, the darker the hover state.  Do not go past -80px */
  24. }
  25.  
  26. .green-btn:active {
  27. 	background: transparent url(img/btn-green.png) repeat-x 0 -120px; /* Adjust this value accordingly, the lower it goes, the lighter the pressed state.  Do not go past -140px */
  28. 	text-shadow: 0 1px #64C100;
  29. 	outline: none;
  30. }

Pointed Buttons

The code for the pointed buttons is a bit different that than of the first two. You see, we can't simply repeat the background on the x axis as before. Instead, we position the background image to the right and add padding to the button.

  1. .arrow-btn {
  2. 	display: inline-block;
  3. 	background: transparent url(img/btn-arrow.png) no-repeat top right;
  4. 	border: none;
  5. 	border-left: 1px solid #004D95;
  6. 	padding: 7px 20px 8px 8px;
  7. 	margin: 4px 0;
  8. 	color: #001D38;
  9. 	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  10. 	text-decoration: none;
  11. 	font-weight: bold;
  12. 	font-size: 20px;
  13. 	text-shadow: 0 -1px #348EE1;
  14. 	line-height: 20px;
  15. 	cursor: pointer;
  16. 	letter-spacing: -1px; /* Optional- Remove if you don't like it */
  17. }
  18.  
  19. .arrow-btn:hover {
  20. 	background: transparent url(img/btn-arrow.png) repeat-x right -35px; /* Do NOT adjust this value*/
  21. }
  22.  
  23. .arrow-btn:active {
  24. 	background: transparent url(img/btn-arrow.png) repeat-x right -70px; /* Do NOT adjust this value*/
  25. 	text-shadow: 0 1px #00488B;
  26. 	outline: none;
  27. }

Customizable Buttons

When it comes to customizable buttons, we will be defining separate color classes for each style. We will create a base class, and stack more classes on those to customize our buttons.

  1. .custom-btn-arrow {
  2. 	display: inline-block;
  3. 	background: url(img/btn-transparent-arrow.png) no-repeat top right;
  4. 	-moz-border-radius: 16px;
  5. 	-webkit-border-radius: 16px;
  6. 	border-radius: 16px;
  7. 	-khtml-border-radius: 16px;
  8. 	padding: 9px 40px 9px 10px;
  9. 	margin: 4px 0;
  10. 	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  11. 	text-decoration: none;
  12. 	font-weight: bold;
  13. 	font-size: 22px;
  14. 	line-height: 22px;
  15. 	cursor: pointer;
  16. 	letter-spacing: -1px; /* Optional- Remove if you don't like it */
  17. }
  18.  
  19. .custom-btn-arrow:active, .custom-btn-x:active {
  20. 	background-position: right -40px;
  21. 	text-shadow: none;
  22. 	outline: none;
  23. }
  24.  
  25. .custom-btn-x {
  26. 	display: inline-block;
  27. 	background: url(img/btn-transparent-x.png) no-repeat top right;
  28. 	-moz-border-radius: 16px;
  29. 	-webkit-border-radius: 16px;
  30. 	border-radius: 16px;
  31. 	-khtml-border-radius: 16px;
  32. 	padding: 9px 40px 9px 10px;
  33. 	margin: 4px 0;
  34. 	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  35. 	text-decoration: none;
  36. 	font-weight: bold;
  37. 	font-size: 22px;
  38. 	line-height: 22px;
  39. 	cursor: pointer;
  40. 	letter-spacing: -1px; /* Optional- Remove if you don't like it */
  41. }
  42.  
  43. .left {
  44. 	background-position: top left;
  45. 	padding: 9px 12px 9px 38px;
  46. }
  47.  
  48. .left:active {
  49. 	background-position: 0 -40px !important;
  50. 	outline: none;
  51. }

Now that we have defined the base styles, we need to define custom color classes for the buttons.

  1. .green {
  2. 	background-color: #AEEA6F; /* Background of Button */
  3. 	border: 1px solid #31540C; /* Border of Button */
  4. 	color: #203806; /* Text Color of Button */
  5. 	text-shadow: 0 -1px #7DCE28; /* Embed Color of the Text (text shadow) */
  6. }
  7.  
  8. .blue {
  9. 	background-color: #68ABE9; /* Background of Button */
  10. 	border: 1px solid #284561; /* Border of Button */
  11. 	color: #162736; /* Text Color of Button */
  12. 	text-shadow: 0 -1px #4890D3; /* Embed Color of the Text (text shadow) */
  13. }
  14.  
  15. .red {
  16. 	background-color: #F75C5C; /* Background of Button */
  17. 	border: 1px solid #702121; /* Border of Button */
  18. 	color: #391111; /* Text Color of Button */
  19. 	text-shadow: 0 -1px #C93A3A; /* Embed Color of the Text (text shadow) */
  20. }
  21.  
  22. .purple {
  23. 	background-color: #D741F7; /* Background of Button */
  24. 	border: 1px solid #5C1B6A; /* Border of Button */
  25. 	color: #391141; /* Text Color of Button */
  26. 	text-shadow: 0 -1px #A936C2; /* Embed Color of the Text (text shadow) */
  27. }
  28.  
  29. .orange {
  30. 	background-color: #FFA133; /* Background of Button */
  31. 	border: 1px solid #744814; /* Border of Button */
  32. 	color: #50310C; /* Text Color of Button */
  33. 	text-shadow: 0 -1px #C17720; /* Embed Color of the Text (text shadow) */
  34. }

IE Issue

Because Internet Explorer 6/7 was made by blood sucking demon children (or something like that), it does not support the CSS rounded corners that we employ for our buttons.

Damn you Microsoft.

Show us your buttons

Of course this tutorial was meant to help you create custom buttons of your own. We insist that you take our code, modify them (do your mad scientist thing), and end up with something fantastic. Please show us your buttons and leave a comment below!

Internet Nerd, Design Freak, oh and Designmess Admin.

Bookmark/Search this post with:
  • Forward
  • Twitter
  • Facebook
  • MySpace
  • Digg
  • StumbleUpon
  • LinkedIn
  • Yahoo
  • Buzz Up!
  • del.icio.us
  • Reddit
  • Google
  • Newsvine
  • Technorati

About Sean GengMember Since 08/03/2009

Web Designer, Web Developer

My name is Sean Geng. I'm a Freelance Web Designer, Graphic Designer, Motion Effects Artist, and Webmaster. I like to push the boundaries. I love creating unique, clean, usable design for the web and other digital sources.

Visit their Website

  • 1795 reads

(Sign Up?)

CommentsAdd your comment

kpjothivelu
Newbie
 offline

nice resource!! sure to share my friends!!!

March 10, 2010 - 7:32am

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <h3> <h4> <i> <b> <p> <a> <br /> <img> <em> <strong> <blockquote> <cite> <code> <ul> <ol> <li> <div class="info-block-left"> <div class="info-block-right"> <div class="quote-left"> <div class="quote-right"> <div class="notice"> <table> <thead> <tbody> <tr class="odd"> <tr class="even"> <tr> <td> <th>
  • You may post PHP code. You should include <?php ?> tags.
  • Web page addresses and e-mail addresses turn into links automatically.
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <actionscript-code>, <actionscript3-code>, <apache-code>, <asp-code>, <css-code>, <html-code>, <javascript-code>, <mysql-code>, <php-code>, <python-code>, <ruby-code>, <sql-code>, <xml-code>. The supported tag styles are: <foo>, [foo].
  • Images can be added to this post.
  • Image links with 'rel="lightbox"' in the <a> tag will appear in a Lightbox when clicked on.
  • Links to HTML content with 'rel="lightframe"' in the <a> tag will appear in a Lightbox when clicked on.
  • Each email address will be obfuscated in a human readable fashion or (if JavaScript is enabled) replaced with a spamproof clickable link.
  • You may insert videos with [video:URL]

More information about formatting options

Other stories you might like

Sorry if its gonna be slow content wise for a week or so. Working on a free wordpress theme. Consider writing for us?