ANIMATED BUBBLE BUTTONS USING CSS3 FOR BLOGGER !

in #utopian-io • 7 years ago (edited)

In this tutorial i will show you Animated Bubble Buttons Using CSS3 for Blogger When your mouse hover on the button you will see that bubble effect will appear on the button. These effects are visible only on browsers that support CSS3

HOW TO MAKE ANIMATED BUBBLE BUTTONS USING CSS3 FOR BLOGGER

Go to Blogger Dashboard --> Design --> Edit HTML
Backup your Template before making any changes to your blog
Now Expand Widget Templates
Find the code shown below using [ctrl+F]

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

}
.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;

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

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

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

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

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

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

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

}
]]></b:skin>

Now save your template
NOW THE HTML PART

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

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

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

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

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


Posted on Utopian.io - Rewarding Open Source Contributors

#blogger #css
7 years ago in #utopian-io by
$0.00
    Reply 3
    Sort:  
  • Trending
    • [-]
     7 years ago 

    Your contribution cannot be approved yet, because it is in the Suggestion. The correct category for your post is Tutorial. See the Utopian Rules. Please edit your post to use the right category at this link, as shown below:

    You can contact us on Discord.
    [utopian-moderator]

    $0.00
      Reply
      [-]
       7 years ago 

      category updated.

      $0.00
        Reply
        [-]
         7 years ago 

        Your contribution cannot be approved because it does not refer to or relate to an open-source repository. See here for a definition of "open-source."

        Your tutorial is not about any open source software. It is a tutorial about making a button which is very generic and can be found easily on the internet.

        You can contact us on Discord.
        [utopian-moderator]

        $0.00
          Reply