Mario’s Buttons

As websites move towards the “web 2.0″ look and feel, a glassy rounded corner button or image is pretty standard. There are many websites out there that will generate buttons for you automatically through their design tools such as My Cool Button and As Button Generator .

The tools are nice to use, but I thought I would show the technique I always use when designing these buttons. Its very easy to do, its simply just a rounded corner rectangle with a gradient.

Open your favorite editor, I personally use FireWorks and sometimes PhotoShop. If you are looking for a open source editor I would suggest GIMP

Creating the Image

Start with a basic rounded corner rectangle for the first layer of your image.



I then give the image a slight inner glow. This is an option in the filter section of FireWorks.



Use the rounded corner rectangle tool again this time with slightly more roundness to it. Select the fill option, choose gradient and set both the colors to white. A white with 10% opacity to a white with 35%. You can play with these numbers until it looks right. Put this gradient on the top half of your image.



Want to add a hover over effect?

Here is a little technique I have picked up. Double the canvase height of your image so you can put a duplicate directly below.



Add some color to the bottom layer of the image on the bottom.



Now add some css.



a.myButtonDiv
{
  display:block;
  width: 271px; /* Exact width of image */
  height: 74px; /* Exactly half of the overall image */
  background: url("http://www.marioedgar.com/images/blog/5.jpg") no-repeat top left;
  line-height: 74px;
  text-align:center;
  color: #fff;
  font-weight:bold;
  font-size: 16px;
}

a.myButtonDiv:hover
{
  background-position: 0 -74px;
  text-decoration:none;
}

And finally the html

     Look at my Button!

Look at my Button!

jQuery? Why not?

Let make this thing stand out a little more by using some animation, start with the CSS tweaked a little bit:

      a.myButton, span.firstBackground, span.secondBackground
      {
          width: 271px;
          height: 74px;
          display:block;
          line-height:74px;
          text-decoration:none;
          font-weight:bold;
          color: #000;
          text-align:center;
          position:absolute;
          top:0;
          color:#fff;
          font-size: 16px;          
      }
      
      .firstBackground
      {
          background: url('http://www.marioedgar.com/images/blog/5.jpg') no-repeat;
          background-position: 0 0;
      }
      .secondBackground  
      {
          background: url('http://www.marioedgar.com/images/blog/5.jpg') no-repeat;
          background-position: 0 -74px;
      }

HTML markup is the same, but we need a parent container now that we are using absolute positioning.


         

Any lastly, the jQuery.

        
jQuery(window).ready(function(){
    jQuery("").insertBefore("a.myButton");
    jQuery("span.secondBackground").css("opacity","0");
    jQuery("a.myButton").mouseenter(function(){
    jQuery(this).parent().find("span.secondBackground").animate ({
    opacity: 1.0
    }, 500); });
    jQuery("a.myButton").mouseleave(function(){
    jQuery(this).parent().find("span.secondBackground").animate ({
    opacity: 0
    }, 500); });
});
         

© 2010 M2Volt all rights reseved

back to top