Question

I’m trying to duplicate the effect found Here on my page, and I’m not really sure how to go about it. I’m using twitter bootstrap 2.0

Answer 1

I think your best bet is to look through this article. It will give you a pretty good run down on how to animate with CSS3.

http://www.css3.info/preview/css3-transitions/

Here is a quick solution I put together: http://jsfiddle.net/zStN5/

CSS:

.button {
margin:10px;
background: #700;
color: #fff;
padding: 5px 10px;
text-decoration: none;
height: 60px;

-webkit-box-shadow: 0px 0px 3px #212121;
-moz-box-shadow: 0px 0px 3px #212121;
box-shadow: 0px 0px 3px #212121;

/* Animate all properties across supporting browsers */
-webkit-transition: all 1s ease-in-out;
/* -o-transition: all 1s ease-in-out; */
-moz-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

.button:hover {
background: #b00;
height: 100px;

/* Box shadow animation bugged in Opera */
-webkit-box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
}​

HTML

<div class="button" href="#">Your Div</div>