Sliding element using CSS3 and jQuery

DEMO

---

Hello, everybody!

#1

---

I made this for fun and discovery.

So, the general steps :

• Create a button, with CSS3, all the fancy color and transition. Below, I defined it as #button1
• Set a canvas element, which is transparent - as you can see, there's nothing there (if it's not clicked) besides the blue box. The canvas there as an area limiter of the button and the content 'underneath' the box. From my example codes below, I defined it as #the-canvas1.
• Create the content box. At first, position the content outside the canvas. I defined it as this class : .the-content-hidden1 
• Next, create another class (.the-content1) and set the position of the content to appear
• Then use the jQuery function for switching the CSS class
  

  $(".class1").toggleClass("class2");

Below is the funny coding for the example above. You can use them for whatever you want, and hopefully you can get even more creative over it. I put the tags for CSS and script, so it can be easily embedded in your HTML.
CSS

<style>

#the-canvas1 {
  position:relative;   margin:auto;
  overflow:hidden;
  width:600px;
  height:90px;
  background:transparent;
}

#the-button1 {
  position:relative;
  color:#C4E2FF;
  text-align:center;
  margin-top:0px;
  font-size:30px;
  line-height:90px;
  font-family:Impact;
  background:#004CFF;

  width:90px;
  height:90px;

  transition:all 0.2s ease-in-out;
  -webkit-transition:all 0.2s ease-in-out;
  -moz-transition:all 0.2s ease-in-out;
  -o-transition:all 0.2s ease-in-out;
}

#the-button1:hover {
  color:white;
  background:#1F62FF;
  cursor:pointer;
}

#the-button1:active {
background:#0047ED;
}

.the-content-hidden1 {
  border-width:7px 5px 2px 5px;
  border-style:solid;
  border-color:#004CFF;
  position:absolute;
  margin-top:0px;
  margin-left:-470px;

  text-align:center;
  font-size:50px;
  font-family:Impact;
  line-height:80px;

  width:540px;
  height:80px;

  background:yellow;
  border-radius:15px;
  webkit-border-radius:15px;
  -moz-border-radius:15px;
  -o-border-radius:15px;
  transition:all 1s ease-in-out;
  -webkit-transition:all 1s ease-in-out;
  -moz-transition:all 1s ease-in-out;
  -o-transition:all 1s ease-in-out;
}

.the-content1 {
margin-left:50px;
}

</style>

jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>

$("#the-button1").click(function() {
  $(".the-content-hidden1").toggleClass("the-content1");
});

</script>

HTML

<div id="the-canvas1">
  <div class="the-content-hidden1">Hello, everybody!</div>
  <div id="the-button1">#1</div>
</div>

Best practice to put <script> tag : right above the closing </body> tag of the HTML. Or, if you want to put the script on your blog post, put it on the bottom of the post, after the text you had written. Explanation on Yahoo! developers.
Except for libraries and custom scripts which need to get loaded/executed first thing on page load, then they should be placed in the head of HTML.

---

To see other demos : #1 and #2
Thanks for visiting!