Awesome CSS3 & jQuery Slide Out Button

Development February 8, 2010 by Mary Lou 9 Comments

Here is an awesome little slide out button. The inspiration for that button came from photoshop.com where Flash is used to create a nice slide out effect. This button does not behave exactly the same, but the effect is quite neat. It does not use any images and uses the border radius property to make the rounded borders.

The button consists of three parts: a container, the little button and the longer button. The two inner parts have absolute positioning. With jQuery, we enlarge the long button and change the colors of the small one.

Enjoy it!

View demo Download source

Tagged with: button, CSS3, jQuery, slide out

Discussion⁹ Join the discussion

Neelakandan
February 9th, 2010 at 10:35

Great one, It’s working and great one. Congrats and TFS.
Connor Crosby
February 14th, 2010 at 13:28

Wow, this is really cool! Thanks for the share!!
Basilakis
February 14th, 2010 at 13:46

Hey!

Really nice implementation, but not you think the slide should sto on hover? :D
Gaurav Mali
February 14th, 2010 at 14:03

it is a good idea! Needs to be more “usable” ;) but we can fix that later. Again, very nice idea! :)
Mary Lou
February 14th, 2010 at 17:41

Hi! I know what you mean! It seems as if you can hover over the description but then it slides back in. I actually thought it was ok since it is not part of the button, but just a description. Don’t you think?
Thanks for your comment!
ML
Will Hancock
February 15th, 2010 at 13:59

Nice, I like the idea… I’d like to extend this to other form elements like inputs with pop-out hints. e.g. valid email etc… Might try to apply this idea to the validate(); errors.
controlsea
March 5th, 2010 at 11:54

The jquery is more and more powerful~~,Thanks for the share!!!