Animated CSS Button with Double Sliding Drawer Effect for Blogger

Animated CSS Button
After an extended absence of CSS button series, LabStrike is back with an awesome animated CSS button with a unique double sliding drawer effect on hover. This buttons includes one main button and two smaller info panels, and these panels will be able to see when mouse hover. Actually, it designed by Design Shack and Ive bloggerized it to works perfectly with Blogspot blog. Now lets see how to implement this button to your Blogger blog.


Before we dive into this tutorial, weve to check out this Animated CSS Button in action. Therefore, Ive provided a screenshot for a demonstration with default, hover and active effects. Hope youll understand it within below screenshot itself. You can also visit our LS Demo Blog and see a sneak peek of the finished results.


Animated CSS Button with Double Sliding Drawer Effect for Blogger

   Creating Button Drawers & Styles with CSS Style Sheets

Due to Bloggers tweak in Blogger template HTML editor, become more advanced for developers. So if youre a novice Blogger, itll be a little bit complicated, because youve to deal with not only CSS and HTML but with jQuery too. In advance, backup your template before you dive into template HTML editor.

Also make sure to steer clear untrue click on invalid clicks on Format template, Revert changes and Revert widget templates to default buttons, if youre using high customized Blogger template.

  • Go to Blogger Dashboard » Template
  • Backup your Blogger Template before making any changes
  • Click on Edit HTML
  • Expand your Blogger template skin | See how it's - screenshot
  • Press Ctrl + F and search the code shown below

]]></b:skin>

Now copy & paste the below code right above/before ]]></b:skin> [use Ctrl+F to find the code].

.button {
    width: 200px;
    margin: 2px auto;
}
.button a {
    display: block;
    height: 50px;
    width: 200px;

  /*TYPE*/
    color: white;
    font: 25px/50px georgia;
    text-decoration: none;
    text-align: center;

  /*GRADIENT*/
    background: #00b7ea;
 /* Old browsers */
    background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%);
 /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3));
 /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%);
 /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%);
 /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%);
 /* IE10+ */
    background: linear-gradient(top, #00b7ea 0%,#009ec3 100%);
 /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );
 /* IE6-9 */;
}
.button a, p {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
    -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
    box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
p {
    background: #222;
    display: block;
    height: 40px;
    width: 180px;
    margin: -50px 0 0 10px;

  /*TYPE*/
    text-align: center;
    font: 12px/45px Helvetica, Verdana, sans-serif;
    color: #fff;

  /*POSITION*/
    position: absolute;
    z-index: -1;

  /*TRANSITION*/
    -webkit-transition: margin 0.5s ease;
    -moz-transition: margin 0.5s ease;
    -o-transition: margin 0.5s ease;
    -ms-transition: margin 0.5s ease;
    transition: margin 0.5s ease;
}

/*HOVER*/
.button:hover .bottom {
    margin: -10px 0 0 10px;
}
.button:hover .top {
    margin: -80px 0 0 10px;
    line-height: 35px;
}
.button:active .bottom {
    margin: -20px 0 0 10px;
}
.button:active .top {
    margin: -70px 0 0 10px;
}

Please note: You can easily fiddle with the above CSS code snippet to change the button font, weight, height, hover, active effects and more, only if you know a little bit of CSS. All the basic customizations are already highlighted in above CSS Code snippet. And if youre not able, ask your needs via comment.

Preview your Blogger template and unless any error occurred, click on Save template and youre successfully added the skin of the animated button. You can use the following HTML code snippet to add this button to your blog or blog post (in Edit HTML section). Also can add this button in Blogger Sidebar via Dashboard » Layout » Add a Gadget » + HTML/JavaScript

<div class="button">
<a href="#">Download Now!</a>
<p class="top">LabStrike Offers FREE</p>
<p class="bottom">1.2MB .zip file</p>
</div>

» LS Button Series: Google Style Button | Twitter Style Button | Icon Button | Expandable Button | Hover Style Button

NB: Dont forget to replace Download Now!, LabStrike Offers FREE, 1.2MB .zip file & # with your main button and info panels texts with your own texts and link URL. Remember, the dimensions of this animated button never adjust according to texts automatically. Leave a comment below and lets see if you appreciated the tutorial!