About design and nearby

How to Make Sweet Buttons with CSS only

Posted: February 29th, 2012 | Author: | Filed under: Tips and Tricks | Tags: , , | No Comments »

Buttons are a very important element of any website, through buttons visitors trigger an action and interact with content.

As for my mind, CSS buttons are much more efficient than image-based buttons. They are rather easier to handle. It’s pretty simple to create dynamic buttons with cross browser compatibility, let me show the way I do it.

Since I need my button to be flexible, I make its width expand with the size of the button’s text and I use an <a> tag for that:

  1. <a class="button" href="#">CSS Button</a>


Via styles and .button I stylize the element:

  1. .button
  2. {
  3. background-color: #ddd; /* fallback for web browsers that doesn't support RGBa */
  4. background-image: -moz-linear-gradient( -90deg, rgba(255, 255, 255, 0.5 ) , rgba(255, 255, 255, 0.0 ) ); /* FF 3.6+ */
  5. background-image: -webkit-gradient(linear, 0 top, 0 bottom, from( rgba(255, 255, 255, 0.5 ) ), to( rgba(255, 255, 255, 0.0 ) ) ); /* Safari 4+, Chrome 2+ */  
  6. background-image: -o-linear-gradient( -90deg, rgba(255, 255, 255, 0.5 ) , rgba(255, 255, 255, 0.0 ) ); /* Opera 11.10 */  
  7. padding: 5px 8px; /* add some space */
  8. color: #222; /* my text color */
  9. font-weight: bold;
  10. border: 1px solid white;
  11. border-radius:7px; /* rounded corners */
  12. text-shadow: 1px 1px 0px white; /* I like this effect so much */
  13. -moz-box-shadow: 0 1px 3px #333;
  14. -webkit-box-shadow: 0 1px 3px #333;
  15. box-shadow: 0 1px 3px #333;
  16. }

My button looks pretty good now, but would like to add some visual effect for the hover action:

  1. .button:hover
  2. {
  3. background-color: #cfcfcf;
  4. color: #d62f27;
  5. cursor:pointer;
  6. }



Here is the result:

Sweet CSS Button


Live example: check the example >>

Share Button

Check Related Posts:


Leave a Reply


  • 5 + = ten

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now