Expandable Button Made in CSS for Blogger

Expandable Button Made in CSS for Blogger
I have shared many CSS widgets for blogger. Because CSS plays very important role in developing a website/blog. It's easy to create widgets in CSS without any image. Today we provide you expandable/collapsible button for your blog. Which means the button expands when mouse hover and it's easy to add also never takes an extra loading time. So, take a look and get involved with the power of CSS.

Before we adding this expandable CSS3 button to your blog, please take a look at the demo button provided below ▼ and get an idea of what we are going to make right here – Hover your mouse on the below button.


Expandable CSS Button - Demo

Download Now

  How to add this expandable CSS3 button to your blogger blog
Follow the below simple steps to add this button to your blogger blog.

  • Go to Blogger Dashboard > Template 
  • Backup your Template before making any changes to your blog
  • Click on Edit HTML
  • Tick Expand Widget Templates
  • Press Ctrl + F and search the code shown below ¬

]]></b:skin>

Now add the below code just Above/Before ]]></b:skin> (use Ctrl+F to find the code)

a.expand-button:link { color: #6E6E6E; 
font: bold 12px Helvetica, Arial, sans-serif; 
text-decoration: none; padding: 7px 12px; 
position: relative; display: inline-block; 
text-shadow: 0 1px 0 white; -webkit-transition: border-color .218s; -moz-transition: border .218s; -o-transition: 
border-color .218s; transition:
border-color .218s; background: #F3F3F3; 
background: -webkit-gradient(linear,0% 40%,0% 70%,from(whiteSmoke),to(#F1F1F1)); 
background: -moz-linear-gradient(linear,0% 40%,0% 70%,
from(whiteSmoke),to(#F1F1F1)); 
border: solid 1px gainsboro; 
border-radius: 2px; -webkit-border-radius: 2px; 
-moz-border-radius: 2px; margin-right: 10px; text-align: center; 
width: 70px; transition: width 1s; -moz-transition: width 1s; -webkit-transition: width 1s; -o-transition: width 1s; } 
a.expand-button:hover 
{ color: #333; border-color: #999; 
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) 
-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2); 
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); width: 160px;

Save your Template. Now we have successfully added the CSS (style) part in your template and lets see how to show this button in your blogger blog post.

 How to show this button in blogger blog post
It's so easy to add this button in your blog post. Just follow below two simple steps to do this task. that's all!

  • Switch your blog post from Compose to EDIT HTML while you writing post.
  • Copy the below code and paste it in your blog post where you wanna display this CSS button.

<a class="expand-button" href="#">Button Text</a>

NB: Replace '#' with your button link URL and 'Button Text' with your own text.


Hope you like this tutorial. If you have any doubt to clarify, feel free to ask via comments or contact form. Also please share this trick and wishing you a happy blogging:)