css3 Growing Links menu

Scaling an element is really fun any easy with CSS3. We don't need CSS3 to do this, we could use relative positioning, offset the position, increase the width, height, and font size. But wow, that's a heck of a lot of work when we can just apply a scale factor and be done with it. These links get their corners more rounded and a bit of a drop shadow applied on hover as well.



.grower { display: block; margin: 0 auto; width: 120px; padding: 2px 5px; border: 1px solid #2f2626; background: rgba(237,95,0,0.3); -moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out; -moz-border-radius: 2px; -webkit-border-radius: 2px; } .grower:hover { background: rgba(237,95,0,1.0); border-color: rgba(237,95,0,1.0); -moz-transform: scale(1.2); -webkit-transform: scale(1.2); -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; -moz-border-radius: 10px; -webkit-border-radius: 10px;

VIEW DEMO