Add Animated Bubble Buttons Using CSS3 In Blogger

These animated and fully professional bubble buttons are made with pure CSS3 and on mouse hover the bubble star shaking and this effect makes these button more beautiful.This button is available in four color themes and three sizes so that you can add any button of any size just by just changing the class name of button.

Animated Bubble Buttons Demo

Live Demo

How To Make Animated Bubble Buttons Using CSS3 for blogger

Go to Blogger Dashboard
Click on DropDown Menu and select Template
Backup your Template before making any changes to your blog
Now Click on Edit HTML --> Proceed --> Expand Widget Templates
Press Ctrl + F and search the code shown below

]]></b:skin>

Replace the above code with the code shown below

.button{
    font:15px Calibri, Arial, sans-serif;

    /* A semi-transparent text shadow */
    text-shadow:1px 1px 0 rgba(255,255,255,0.4);

    /* Overriding the default underline styling of the links */
    text-decoration:none !important;
    white-space:nowrap;

    display:inline-block;
    vertical-align:baseline;
    position:relative;
    cursor:pointer;
    padding:10px 20px;

    background-repeat:no-repeat;

    /* The following two rules are fallbacks, in case
       the browser does not support multiple backgrounds. */

    background-position:bottom left;
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpPkzYOkK26ZM4AzCBZQevOXsgtsfBiFiAYGhRPqNEonIuFP9xRf8vMu2cN_FetrENzzQUcKXD0LyMkkkduzhDay0tAHCiu7dQp8_lOv0Tzjo8gSRmzmKrndqPG5bVJUKGm8WcpjqwJs/s1600/button_bg.png');

    /* Multiple backgrounds version. The background images
       are defined individually in color classes */

    background-position:bottom left, top right, 0 0, 0 0;
    background-clip:border-box;

    /* Applying a default border raidus of 8px */

    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;

    /* A 1px highlight inside of the button */

    -moz-box-shadow:0 0 1px #fff inset;
    -webkit-box-shadow:0 0 1px #fff inset;
    box-shadow:0 0 1px #fff inset;

    /* Animating the background positions with CSS3 */
    /* Currently works only in Safari/Chrome */

    -webkit-transition:background-position 1s;
    -moz-transition:background-position 1s;
    transition:background-position 1s;
}

.button:hover{

    /* The first rule is a fallback, in case the browser
       does not support multiple backgrounds
    */

    background-position:top left;
    background-position:top left, bottom right, 0 0, 0 0;
}

.button:active{
    /* Moving the button 1px to the bottom when clicked */
    bottom:-1px;
}

/* The three buttons sizes */

.button.big        { font-size:30px;}
.button.medium    { font-size:18px;}
.button.small    { font-size:13px;}

/* A more rounded button */

.button.rounded{
    -moz-border-radius:4em;
    -webkit-border-radius:4em;
    border-radius:4em;
}

/* Defining four button colors */

/* BlueButton */

.blue.button{
    color:#0f4b6d !important;

    border:1px solid #84acc3 !important;

    /* A fallback background color */
    background-color: #48b5f2;

    /* Specifying a version with gradients according to */

    background-image:    url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpPkzYOkK26ZM4AzCBZQevOXsgtsfBiFiAYGhRPqNEonIuFP9xRf8vMu2cN_FetrENzzQUcKXD0LyMkkkduzhDay0tAHCiu7dQp8_lOv0Tzjo8gSRmzmKrndqPG5bVJUKGm8WcpjqwJs/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpPkzYOkK26ZM4AzCBZQevOXsgtsfBiFiAYGhRPqNEonIuFP9xRf8vMu2cN_FetrENzzQUcKXD0LyMkkkduzhDay0tAHCiu7dQp8_lOv0Tzjo8gSRmzmKrndqPG5bVJUKGm8WcpjqwJs/s1600/button_bg.png'),
                        -moz-radial-gradient(    center bottom, circle,
                                                rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
                        -moz-linear-gradient(#4fbbf7, #3faeeb);

    background-image:    url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpPkzYOkK26ZM4AzCBZQevOXsgtsfBiFiAYGhRPqNEonIuFP9xRf8vMu2cN_FetrENzzQUcKXD0LyMkkkduzhDay0tAHCiu7dQp8_lOv0Tzjo8gSRmzmKrndqPG5bVJUKGm8WcpjqwJs/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpPkzYOkK26ZM4AzCBZQevOXsgtsfBiFiAYGhRPqNEonIuFP9xRf8vMu2cN_FetrENzzQUcKXD0LyMkkkduzhDay0tAHCiu7dQp8_lOv0Tzjo8gSRmzmKrndqPG5bVJUKGm8WcpjqwJs/s1600/button_bg.png'),
                        -webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
                                            from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
                        -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}

.blue.button:hover{
    background-color:#63c7fe;

    background-image:    url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpPkzYOkK26ZM4AzCBZQevOXsgtsfBiFiAYGhRPqNEonIuFP9xRf8vMu2cN_FetrENzzQUcKXD0LyMkkkduzhDay0tAHCiu7dQp8_lOv0Tzjo8gSRmzmKrndqPG5bVJUKGm8WcpjqwJs/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpPkzYOkK26ZM4AzCBZQevOXsgtsfBiFiAYGhRPqNEonIuFP9xRf8vMu2cN_FetrENzzQUcKXD0LyMkkkduzhDay0tAHCiu7dQp8_lOv0Tzjo8gSRmzmKrndqPG5bVJUKGm8WcpjqwJs/s1600/button_bg.png'),
                        -moz-radial-gradient(    center bottom, circle,
                                                rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
                        -moz-linear-gradient(#63c7fe, #58bef7);

    background-image:    url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpPkzYOkK26ZM4AzCBZQevOXsgtsfBiFiAYGhRPqNEonIuFP9xRf8vMu2cN_FetrENzzQUcKXD0LyMkkkduzhDay0tAHCiu7dQp8_lOv0Tzjo8gSRmzmKrndqPG5bVJUKGm8WcpjqwJs/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpPkzYOkK26ZM4AzCBZQevOXsgtsfBiFiAYGhRPqNEonIuFP9xRf8vMu2cN_FetrENzzQUcKXD0LyMkkkduzhDay0tAHCiu7dQp8_lOv0Tzjo8gSRmzmKrndqPG5bVJUKGm8WcpjqwJs/s1600/button_bg.png'),
                        -webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
                                            from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
                        -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}

/* Green Button */

.green.button{
    color:#345903 !important;
    border:1px solid #96a37b !important;
    background-color: #79be1e;

    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpPkzYOkK26ZM4AzCBZQevOXsgtsfBiFiAYGhRPqNEonIuFP9xRf8vMu2cN_FetrENzzQUcKXD0LyMkkkduzhDay0tAHCiu7dQp8_lOv0Tzjo8gSRmzmKrndqPG5bVJUKGm8WcpjqwJs/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpPkzYOkK26ZM4AzCBZQevOXsgtsfBiFiAYGhRPqNEonIuFP9xRf8vMu2cN_FetrENzzQUcKXD0LyMkkkduzhDay0tAHCiu7dQp8_lOv0Tzjo8gSRmzmKrndqPG5bVJUKGm8WcpjqwJs/s1600/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpPkzYOkK26ZM4AzCBZQevOXsgtsfBiFiAYGhRPqNEonIuFP9xRf8vMu2cN_FetrENzzQUcKXD0LyMkkkduzhDay0tAHCiu7dQp8_lOv0Tzjo8gSRmzmKrndqPG5bVJUKGm8WcpjqwJs/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpPkzYOkK26ZM4AzCBZQevOXsgtsfBiFiAYGhRPqNEonIuFP9xRf8vMu2cN_FetrENzzQUcKXD0LyMkkkduzhDay0tAHCiu7dQp8_lOv0Tzjo8gSRmzmKrndqPG5bVJUKGm8WcpjqwJs/s1600/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}

.green.button:hover{
    background-color:#89d228;

    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpPkzYOkK26ZM4AzCBZQevOXsgtsfBiFiAYGhRPqNEonIuFP9xRf8vMu2cN_FetrENzzQUcKXD0LyMkkkduzhDay0tAHCiu7dQp8_lOv0Tzjo8gSRmzmKrndqPG5bVJUKGm8WcpjqwJs/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpPkzYOkK26ZM4AzCBZQevOXsgtsfBiFiAYGhRPqNEonIuFP9xRf8vMu2cN_FetrENzzQUcKXD0LyMkkkduzhDay0tAHCiu7dQp8_lOv0Tzjo8gSRmzmKrndqPG5bVJUKGm8WcpjqwJs/s1600/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpPkzYOkK26ZM4AzCBZQevOXsgtsfBiFiAYGhRPqNEonIuFP9xRf8vMu2cN_FetrENzzQUcKXD0LyMkkkduzhDay0tAHCiu7dQp8_lOv0Tzjo8gSRmzmKrndqPG5bVJUKGm8WcpjqwJs/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpPkzYOkK26ZM4AzCBZQevOXsgtsfBiFiAYGhRPqNEonIuFP9xRf8vMu2cN_FetrENzzQUcKXD0LyMkkkduzhDay0tAHCiu7dQp8_lOv0Tzjo8gSRmzmKrndqPG5bVJUKGm8WcpjqwJs/s1600/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}

/* Orange Button */

.orange.button{
    color:#693e0a !important;
    border:1px solid #bea280 !important;
    background-color: #e38d27;

    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpPkzYOkK26ZM4AzCBZQevOXsgtsfBiFiAYGhRPqNEonIuFP9xRf8vMu2cN_FetrENzzQUcKXD0LyMkkkduzhDay0tAHCiu7dQp8_lOv0Tzjo8gSRmzmKrndqPG5bVJUKGm8WcpjqwJs/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpPkzYOkK26ZM4AzCBZQevOXsgtsfBiFiAYGhRPqNEonIuFP9xRf8vMu2cN_FetrENzzQUcKXD0LyMkkkduzhDay0tAHCiu7dQp8_lOv0Tzjo8gSRmzmKrndqPG5bVJUKGm8WcpjqwJs/s1600/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpPkzYOkK26ZM4AzCBZQevOXsgtsfBiFiAYGhRPqNEonIuFP9xRf8vMu2cN_FetrENzzQUcKXD0LyMkkkduzhDay0tAHCiu7dQp8_lOv0Tzjo8gSRmzmKrndqPG5bVJUKGm8WcpjqwJs/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpPkzYOkK26ZM4AzCBZQevOXsgtsfBiFiAYGhRPqNEonIuFP9xRf8vMu2cN_FetrENzzQUcKXD0LyMkkkduzhDay0tAHCiu7dQp8_lOv0Tzjo8gSRmzmKrndqPG5bVJUKGm8WcpjqwJs/s1600/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}

.orange.button:hover{
    background-color:#ec9732;

    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpPkzYOkK26ZM4AzCBZQevOXsgtsfBiFiAYGhRPqNEonIuFP9xRf8vMu2cN_FetrENzzQUcKXD0LyMkkkduzhDay0tAHCiu7dQp8_lOv0Tzjo8gSRmzmKrndqPG5bVJUKGm8WcpjqwJs/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpPkzYOkK26ZM4AzCBZQevOXsgtsfBiFiAYGhRPqNEonIuFP9xRf8vMu2cN_FetrENzzQUcKXD0LyMkkkduzhDay0tAHCiu7dQp8_lOv0Tzjo8gSRmzmKrndqPG5bVJUKGm8WcpjqwJs/s1600/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpPkzYOkK26ZM4AzCBZQevOXsgtsfBiFiAYGhRPqNEonIuFP9xRf8vMu2cN_FetrENzzQUcKXD0LyMkkkduzhDay0tAHCiu7dQp8_lOv0Tzjo8gSRmzmKrndqPG5bVJUKGm8WcpjqwJs/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpPkzYOkK26ZM4AzCBZQevOXsgtsfBiFiAYGhRPqNEonIuFP9xRf8vMu2cN_FetrENzzQUcKXD0LyMkkkduzhDay0tAHCiu7dQp8_lOv0Tzjo8gSRmzmKrndqPG5bVJUKGm8WcpjqwJs/s1600/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}

.gray.button{
    color:#525252 !important;
    border:1px solid #a5a5a5 !important;
    background-color: #a9adb1;

    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpPkzYOkK26ZM4AzCBZQevOXsgtsfBiFiAYGhRPqNEonIuFP9xRf8vMu2cN_FetrENzzQUcKXD0LyMkkkduzhDay0tAHCiu7dQp8_lOv0Tzjo8gSRmzmKrndqPG5bVJUKGm8WcpjqwJs/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpPkzYOkK26ZM4AzCBZQevOXsgtsfBiFiAYGhRPqNEonIuFP9xRf8vMu2cN_FetrENzzQUcKXD0LyMkkkduzhDay0tAHCiu7dQp8_lOv0Tzjo8gSRmzmKrndqPG5bVJUKGm8WcpjqwJs/s1600/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpPkzYOkK26ZM4AzCBZQevOXsgtsfBiFiAYGhRPqNEonIuFP9xRf8vMu2cN_FetrENzzQUcKXD0LyMkkkduzhDay0tAHCiu7dQp8_lOv0Tzjo8gSRmzmKrndqPG5bVJUKGm8WcpjqwJs/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpPkzYOkK26ZM4AzCBZQevOXsgtsfBiFiAYGhRPqNEonIuFP9xRf8vMu2cN_FetrENzzQUcKXD0LyMkkkduzhDay0tAHCiu7dQp8_lOv0Tzjo8gSRmzmKrndqPG5bVJUKGm8WcpjqwJs/s1600/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}

.gray.button:hover{
    background-color:#b6bbc0;

    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpPkzYOkK26ZM4AzCBZQevOXsgtsfBiFiAYGhRPqNEonIuFP9xRf8vMu2cN_FetrENzzQUcKXD0LyMkkkduzhDay0tAHCiu7dQp8_lOv0Tzjo8gSRmzmKrndqPG5bVJUKGm8WcpjqwJs/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpPkzYOkK26ZM4AzCBZQevOXsgtsfBiFiAYGhRPqNEonIuFP9xRf8vMu2cN_FetrENzzQUcKXD0LyMkkkduzhDay0tAHCiu7dQp8_lOv0Tzjo8gSRmzmKrndqPG5bVJUKGm8WcpjqwJs/s1600/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpPkzYOkK26ZM4AzCBZQevOXsgtsfBiFiAYGhRPqNEonIuFP9xRf8vMu2cN_FetrENzzQUcKXD0LyMkkkduzhDay0tAHCiu7dQp8_lOv0Tzjo8gSRmzmKrndqPG5bVJUKGm8WcpjqwJs/s1600/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpPkzYOkK26ZM4AzCBZQevOXsgtsfBiFiAYGhRPqNEonIuFP9xRf8vMu2cN_FetrENzzQUcKXD0LyMkkkduzhDay0tAHCiu7dQp8_lOv0Tzjo8gSRmzmKrndqPG5bVJUKGm8WcpjqwJs/s1600/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}
]]></b:skin>

Now save your template

Now The HTML Part

HTML FOR LARGE SIZED BUTTONS (USE ANYONE BASED ON COLOR)

    <a href="LINK" class="button big blue">LINKNAME</a>
    <a href="LINK" class="button big green">LINKNAME</a>
    <a href="LINK" class="button big orange">LINKNAME</a>
    <a href="LINK" class="button big gray">LINKNAME</a>

HTML FOR MEDIUM SIZED BUTTONS (USE ANYONE BASED ON COLOR)

    <a href="LINK" class="button blue medium">LINKNAME</a>
    <a href="LINK" class="button green medium">LINKNAME</a>
    <a href="LINK" class="button orange medium">LINKNAME</a>
    <a href="LINK" class="button gray medium">LINKNAME</a>

HTML FOR SMALL SIZED BUTTONS (USE ANYONE BASED ON COLOR)

    <a href="LINK" class="button small blue">LINKNAME</a>
    <a href="LINK" class="button small green">LINKNAME</a>
    <a href="LINK" class="button small orange">LINKNAME</a>
    <a href="LINK" class="button small gray">LINKNAME</a>

HTML FOR SMALL SIZED BUTTONS WITH ROUNDED CORNER (USE ANYONE BASED ON COLOR)

    <a href="LINK" class="button small blue rounded">LINKNAME</a>
    <a href="LINK" class="button small green rounded">LINKNAME</a>
    <a href="LINK" class="button small orange rounded">LINKNAME</a>
    <a href="LINK" class="button small gray rounded">LINKNAME</a>

Replace LINK with your link and LINKNAME with the name/title of your link

Like it? Share it.

11 comments

evaggelos evaggelou

21 April 2012 at 14:18

First of all congratulations for your very nice blog, I put on my blog some buttons, but not necessarily work with hyperlinks, just remove the "LINK" losing the image of the button.

Unknown

22 April 2012 at 00:02 Author

@Vaggelis AGAYou have done something wrong, i have test it, it works fine

22 April 2012 at 04:55

@sonu

Yes it works very well,I've done the test on my test page(http://tets1.blogspot.com/)

maybe i did not properly question, my question is, if I can use the buttons without using hyperlinks so that when the user presses the button to show only the effects.

22 April 2012 at 06:56 Author

@Vaggelis AGAUse this <a class="button big blue">LINKNAME</a>

22 April 2012 at 07:27

@sonu

Thank you very much works exactly as I asked

22 April 2012 at 07:59 Author

@Vaggelis AGAWelcome !

Debbie Navarro PH

31 July 2012 at 23:52

I tried it but it doesn't work on my post. Your help will be much appreciated. Thank you!

1 August 2012 at 05:05 Author

@Debbie Navarro You have done something wrong, i have test it, it works fine

1 August 2012 at 07:18

But how? how did you test it? i tried to put a button on my post but when i preview it doesnt showing up just the text but not the css button, Tell me what i did wrong.. lead me...Thank you!

1 August 2012 at 07:58 Author

@Debbie Navarro I am using these buttons in my blog and it works fine. When you write a post click on Edit HTML tab and paste this code <a href="LINK" class="button big green">LINKNAME</a>

Em Ji Madhu

1 August 2012 at 13:24

@Debbie Navarro sorry for the interruption... this button wont show up in preview mode i guess... you should publicize it to see its action... it works perfectly on my blog... thanks to sonu anyway...

Click to Add a New Comment

If you're asking a question click on Subscribe By Email link, on the comment form, to be notified of replies.
Do NOT add links to the body of your comment as they will not be published.
Only the comments posted in ENGLISH will be approved.
If you have a problem check first the comments , maybe you will find the solution there.