Make hanging style buttons with CSS3 transition

Here is a demo of hanging style buttons

Tested in latest versions of Firefox, Chrome and Opera.

Code

Html is minimal :

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

CSS :

.button
{
  /*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);

  color:#fff;
  padding:7px 15px;
  float:left;
  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);

  font-weight:bold;
  font-size:14px;
  cursor:pointer;

  -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

.button:hover
{
  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.

Popularity: 1% [?]