CSS3 Slide Down Toggle

Thank you for downloading.

Your download will begin in 3 seconds. If not, please click here

Share Tweet

Get new freebies like this

in your inbox every other week. No spam

This is a simple slide down Toggle Demo created with CSS3. No jquery of javascript used to create this. So Let’s see the code

CSS3 Slide Down Toggle

Here is the HTML Code. Its self explanatory. Checkbox is used to Toggle Animation.

<!--Hidden Checkbox to activate toggle animation-->
<input type="checkbox" name="toggle" id="toggle" />
<!--Toggle Button-->
<label for="toggle"></label>
<!--Page Container-->
<div class="container">...</div>
<!--Hidden Message-->
<div class="message">...</div>

And the CSS

.message {
 top: -250px;
 left: 0;
 width: 100%;
 transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
}

/*When Clicked */
#toggle:checked ~ .message {
 top: 0;
}
#toggle:checked ~ .container {
 margin-top: 250px;
}
#toggle:checked + label {
 background:#dd6149;
}
#toggle:checked + label:after {
 content:"Close"
}

You can download the source code from left side. Let us know your thoughts in comments.