Google Style CSS3 Buttons With Small and Large in Size


Best Movies Sites: TOP 10 MOVIE WEBSITES


Google Style CSS3 Buttons With Small and Large in Size
I had already wrote about adding CSS3 buttons to your blogger blog/website in my previous posts. Today let me wanna tell you about installing Google style CSS3 buttons with small and large in Size to your blog/website. Its so easy to use and you can use it in your all HTML/CSS supported services like Blogger, WordPress etc. Lets see how this brings in action.

As I mentioned above there are two types of buttons are available in this tutorial. Small Buttons and Large Buttons. At first we have to add the skin of these both buttons. that's adding CSS part into your blogger template. Lets see how to do it. 

  • 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)

.buttons {
    float: left;
    padding-bottom: 20px;
    clear: both;
}
a.button {
    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 #fff;
    -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(#F5F5F5),to(#F1F1F1));
    background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    border: solid 1px #dcdcdc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin-right: 10px;
}
a.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);
}
a.button:active {
    color: #000;
    border-color: #444;
}
a.left {
    -webkit-border-top-right-radius: 0;
    -moz-border-radius-topright: 0;
    border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -moz-border-radius-bottomright: 0;
    border-bottom-right-radius: 0;
    margin: 0;
}
a.middle {
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-left: solid 1px #f3f3f3;
    margin: 0;
    border-left: solid 1px rgba(255, 255, 255, 0);
}
a.middle:hover,
a.right:hover { border-left: solid 1px #999 }
a.right {
    -webkit-border-top-left-radius: 0;
    -moz-border-radius-topleft: 0;
    border-top-left-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-bottomleft: 0;
    border-bottom-left-radius: 0;
    border-left: solid 1px #f3f3f3;
    border-left: solid 1px rgba(255, 255, 255, 0);
}
a.big {
    font-size: 16px;
    padding: 10px 15px;
}
a.supersize {
    font-size: 20px;
    padding: 15px 20px;
}

[You can change the button's font with your desired font name by customizing the above highlighted line - Line no:8]

Click Save Template. Now we have added the Skin (CSS) of these both buttons. The next step is adding HTML part to your blog post (use anywhere in your blog). Now we have to add two types of buttons named Large Buttons as well as Small Buttons. Lets begin with small buttons.

question mark icon png How to add this buttons to 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 following html code and paste It in your blog post where you wanna display Small/Large buttons

add this icon png For adding small buttons...
Before we adding this small buttons please take look at the demo image screenshot shown below which I have taken from my demo blog. Click on the below pic (ie, Small buttons seem as below ▼ image screenshot).

small css3 google buttons

<a href="#" class="button">Stand Alone</a>
<a href="#" class="button left">Left</a>
<a href="#" class="button middle">Middle</a>
<a href="#" class="button middle">Middle</a>
<a href="#" class="button right">Right</a>
<a href="#" class="button">Stand Alone</a>

 For adding large buttons...
Before we adding this Large buttons please take look at the demo image screenshot shown below which I have taken from my demo blog. Click on the below pic (ie, Large buttons seem as below ▼ image screenshot).

large css3 google buttons

<a href="#" class="button big">Stand Alone</a>
<a href="#" class="button left big">Left</a>
<a href="#" class="button middle big">Middle</a>
<a href="#" class="button middle big">Middle</a>
<a href="#" class="button right big">Right</a>
<a href="#" class="button big">Stand Alone</a>

warning icon png  Replace "#" with your URL and "Text" with your button name of both small and large buttons.

You may also like -


    Hope you like it. You can test this CSS trick in HTML editor before adding it in your blog/website. If you're facing any problem feel free to ask via comments. Happy blogging:)