Custom jQuery Slide Button

The idea of this code is to create a button with a cross on the right side and when you click, it rotates the cross and expands a hidden div. To slide up you can click on the button or on a round circle on the bottom of the div.

Everything was made using HTML, JavaScript and CSS.

You can also check a demo here.

button example


To have better rotation control I used an awesome jQuery addon library called Transit (http://ricostacruz.com/jquery.transit/) that add many transitions & transformations functions.

The cross is actually an “╳” with a 45 degree rotation, and the bottom button was made entirely using css.

Check this project on github.

If you have any question let me know! 😛

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.