Rounded Button Widget For Blogger Designed With CSS
Circular rounded button widget for blogger designed in css with hover effect can be used as a button to download and for other purpose.
 |
| Rounded Button Widget For Blogger Designed With CSS |
After sharing download button widget for blogger. Here we have come up with circular or rounded buttons with css hover effect that changes color on mouse hover. Such buttons increase conversion rate of blogger blog or website. Sometimes it depends on the type of the background color you choose for button.
We have chosen red color as background color and when you hover your mouse on the circle it changes the color and becomes dark red. That's it in the center of the circle you can put your links with anchor text. So this is the all about widget.
Below I will share html and css code of this button.
How to install and use this widget. (CSS Code)
- Go to blogger dashboard .
- Click on edit HTML.
- Now search for ]]></b:skin>
- And copy the below code above this.
CSS code that you have to paste.
input#avdhootround{
width:100px; /*same as the height*/
height:100px; /*same as the width*/
background-color:#ff0000;
border:1px solid #ff0000; /*same colour as the background*/
color:#fff;
font-size:1.6em;
/*set the border-radius at half the size of the width and height*/
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
/*give the button a small drop shadow*/
-webkit-box-shadow: 0 0 10px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 10px rgba(0,0,0, .75);
box-shadow: 2px 2px 15px rgba(0,0,0, .75);
}
/***NOW STYLE THE BUTTON'S HOVER STATE***/
input#avdhootround:hover{
background:#c20b0b;
border:1px solid #c20b0b;
/*reduce the size of the shadow to give a pushed effect*/
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
-moz-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
box-shadow: 0px 0px 5px rgba(0,0,0, .75);
}
width:100px; /*same as the height*/
height:100px; /*same as the width*/
background-color:#ff0000;
border:1px solid #ff0000; /*same colour as the background*/
color:#fff;
font-size:1.6em;
/*set the border-radius at half the size of the width and height*/
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
/*give the button a small drop shadow*/
-webkit-box-shadow: 0 0 10px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 10px rgba(0,0,0, .75);
box-shadow: 2px 2px 15px rgba(0,0,0, .75);
}
/***NOW STYLE THE BUTTON'S HOVER STATE***/
input#avdhootround:hover{
background:#c20b0b;
border:1px solid #c20b0b;
/*reduce the size of the shadow to give a pushed effect*/
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
-moz-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
box-shadow: 0px 0px 5px rgba(0,0,0, .75);
}
HTML code
Now copy the below html code where you want this button to appear. Below is the html code of the button.
<input id="avdhootround" type="submit" value="Push!" />
This is it. This way you can insert this button in blogger posts. Did you enjoy this post about rounded and a circular button widget for blogger then please do share it and comment.
