CSS3 Slide Down Toggle

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"
}

Heads Up! Make sure you have added Browser prefixes

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

Freelance Web & UX Designer from Incredible India. I design and develop creative websites, landing pages, and applications for startups and enterprises.

Twitter