Make hanging style buttons with CSS3 transition

Here is a demo of hanging style buttons

Tested in latest versions of Firefox, Chrome and Opera.


Html is minimal :

<a class="button">Hang Down</a>


  /*border:1px solid #9DA5B4;*/

  background-image: -webkit-linear-gradient(top, #9DA5B4, #7A8493);
  background-image: -moz-linear-gradient(top, #9DA5B4, #7A8493);
  background-image: -ms-linear-gradient(top, #9DA5B4, #7A8493);
  background-image: -o-linear-gradient(top, #9DA5B4, #7A8493);
  background-image: linear-gradient(top, #9DA5B4, #7A8493);

  padding:7px 15px;
  margin:0 0 0 15px;
  -o-box-shadow: 1px 2px 2px rgba(200,200,200,1);
  -webkit-box-shadow: 1px 2px 2px rgba(200,200,200,1);
  -moz-box-shadow: 1px 2px 2px rgba(200,200,200,1);
  box-shadow:1px 2px 2px rgba(200,200,200,1);
  text-shadow:0px 0px 10px rgba(255,255,255,0.5);


  -webkit-border-radius: 5px; /* Saf3-4, iOS 1-3.2, Android <e;1.6 */
  -moz-border-radius: 5px; /* FF1-3.6 */
  border-radius: 5px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
  /* useful if you don't want a bg color from leaking outside the border: */        

  -moz-background-clip: padding; 
  -webkit-background-clip: padding-box; 
  background-clip: padding-box; 

  -webkit-transition: padding 0.5s ease-out;  /* Saf3.2+, Chrome */
  -moz-transition: padding 0.5s ease-out;  /* FF4+ */
  -ms-transition: padding 0.5s ease-out;  /* IE10? */
  /* Opera needs padding-top , padding does not work in 11.51 */
  -o-transition: padding-top 0.5s ease-out;  /* Opera 10.5+ */
  transition: padding 0.5s ease-out;

  display:inline-block;	/* It is important for the a tag to hang */

The transition property applies to padding over a period of 0.5 seconds with the function of ease-out. Since the transition has been applied in the base style, it will have effect both when the padding increases and decreases.
So when the mouse is moved out of the button it slides back with same time period.

The display inline-block property is important for the a tag to take proper margins and transition effects.

Hang on mouse over

  padding:20px 15px 7px 15px;

The trick behind hanging the button is change its top padding. Since transition of 0.5 seconds has been applied on padding , the button grows down smoothly.

Last Updated On : 6th December 2011

Subscribe to get updates delivered to your inbox

About Silver Moon

Php developer, blogger and Linux enthusiast. He can be reached at [email protected]. Or find him on

Leave a comment