We develop enthralling web experiences.


How to Create a Cool Slide Out Panel with CSS3 only

Many sites have a really cool hidden panel which contains some relevant information and this panel is revealed to us, with a cool animation, when we click on a particular button or hover over it. This has usually been achieved using jQuery. But now as we advent towards the future and CSS3 is becoming a reality, here is a tutorial on how to build an animated slide out panel using only CSS3.

Live Demo Download

It would be awesome if you could like us on Facebook or subscribe to our feed...

I wrote a tutorial for It is about how to use CSS3 to achieve goals which were only possible using javascript libraries like jQuery and Mootools. In this tutorial, we create a slide out subscribe panel.

Final Preview of the Tutorial

Once the viewer hovers over the subscribe button on the top right hand corner, the whole hidden panel will come sliding down with a very smooth animation effect revealing the subscribing options to the visitor. All of this will be done by just using CSS3.

Effect on Hovering over the subscribe button

Don’t miss my tutorial on if you want to bypass using javascript to achieve this cool sliding effect.

Discussion 7 Responses

Thanks for sharing this article, I’ve had a look at the tutorial and I reckon this will come in handy for an easy and fancy way of linking several of my sub domains together. Thanks.

Glad that it could be of help :)

Can you please explain, How to use CDN for W3C Total Cache on Sharec Hosting ?

Generally, u need to add a cname on the server to activate CDN properly. With regards to W3C total cache, am sure this guide will help you out :)

Was totally stuck until I read this, now back up and rungnin.

Great functionality! However, I’m using the latest Firefox version and I’m having a issue: when I hover over the ‘Subscribe’ button and the mouse ‘touches’ the black bar that delimits the slide the animation stops. I have to follow the Subscribe button with my mouse so I can see the whole bar.

Leave a Reply

Your email address will not be published. Required fields are marked *

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=""> <strike> <strong>