Beautiful Big and Small CSS Buttons With Hover Effect

 Friends now i share some beautiful buttons with mouse hover effect. This is customized with  CSS and HTML  parts . Both part are important. CSS contain their properties like color mouse hover effect etc, Also HTML part is only for apply CSS effect in blogger. you can add this beautiful buttons in your blogger keep read this post.

Log in to your Blogger account

• Select on Template Option.

• Click on Edit HTML .

• Find (CTRL+F)  ]]></b:skin> tag.

• Copy and paste CSS code above ]]></b:skin> tag.

• Copy and paste HTML code, where you want to see your image. ( Replace highlighted RED color with your Link and Text )

CSS Code

.awesome, .awesome:visited {
background: #222 url(http://2.bp.blogspot.com/-Rugz3Sx02dI/UAr7ubzYL2I/AAAAAAAACT0/4g24oIDf0r8/s1600/overlayy.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
font-family:Calibri, Arial, sans-serif;
}
.awesome:hover                            { background-color: #111; color: #fff; }
.awesome:active                            { top: 1px; }
.small.awesome, .small.awesome:visited             { font-size: 18px; padding: ; }
.awesome, .awesome:visited,
.medium.awesome, .medium.awesome:visited         { font-size: 24px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
.large.awesome, .large.awesome:visited             { font-size: 30px; padding: 8px 14px 9px; }

.green.awesome, .green.awesome:visited        { background-color: #91bd09; }
.green.awesome:hover                        { background-color: #749a02; }
.blue.awesome, .blue.awesome:visited        { background-color: #2daebf; }
.blue.awesome:hover                            { background-color: #007d9a; }
.red.awesome, .red.awesome:visited            { background-color: #e33100; }
.red.awesome:hover                            { background-color: #872300; }
.magenta.awesome, .magenta.awesome:visited        { background-color: #a9014b; }
.magenta.awesome:hover                            { background-color: #630030; }
.orange.awesome, .orange.awesome:visited        { background-color: #ff5c00; }
.orange.awesome:hover                            { background-color: #d45500; }
.yellow.awesome, .yellow.awesome:visited        { background-color: #ffb515; }
.yellow.awesome:hover                            { background-color: #fc9200; }
.pink.awesome, .pink.awesome:visited        { background-color: #e22092; }
.pink.awesome:hover                            { background-color: #c81e82; }

HTML Codes

Big Buttons

Black

Live Demo

<a href="YOUR-LINK-HERE" class="large awesome">YOUR-TEXT-HERE</a>

Replace highlighted RED color with your Link and Text
Blue

Live Demo

<a href="YOUR-LINK-HERE" class="large blue awesome">YOUR-TEXT-HERE</a>

Replace highlighted RED color with your Link and Text
Magenta

Live Demo

<a href="YOUR-LINK-HERE" class="large magenta awesome">YOUR-TEXT-HERE</a>

Replace highlighted RED color with your Link and Text
Green

Live Demo

<a href="YOUR-LINK-HERE" class="large green awesome">YOUR-TEXT-HERE</a>

Replace highlighted RED color with your Link and Text
Red

Live Demo

<a href="YOUR-LINK-HERE" class="large red awesome">YOUR-TEXT-HERE</a>

Replace highlighted RED color with your Link and Text
Orange

Live Demo

<a href="YOUR-LINK-HERE" class="large orange awesome">YOUR-TEXT-HERE</a>

Replace highlighted RED color with your Link and Text
Yellow

Live Demo

<a href="YOUR-LINK-HERE" class="large yellow awesome">YOUR-TEXT-HERE</a>

Replace highlighted RED color with your Link and Text
Pink

Live Demo

<a href="YOUR-LINK-HERE" class="large pink awesome">YOUR-TEXT-HERE</a>

Replace highlighted RED color with your Link and Text

Small Buttons

Black

Live Demo

<a href="YOUR-LINK-HERE" class="small awesome">YOUR-TEXT-HERE</a>

Replace highlighted RED color with your Link and Text
Blue

Live Demo

<a href="YOUR-LINK-HERE" class="small blue awesome">YOUR-TEXT-HERE</a>

Replace highlighted RED color with your Link and Text
Magenta

Live Demo

<a href="YOUR-LINK-HERE" class="small magenta awesome">YOUR-TEXT-HERE</a>

Replace highlighted RED color with your Link and Text
Green

Live Demo

<a href="YOUR-LINK-HERE" class="small green awesome">YOUR-TEXT-HERE</a>

Replace highlighted RED color with your Link and Text
Red

Live Demo

<a href="YOUR-LINK-HERE" class="large red awesome">YOUR-TEXT-HERE</a>

Replace highlighted RED color with your Link and Text
Orange

Live Demo

<a href="YOUR-LINK-HERE" class="small orange awesome">YOUR-TEXT-HERE</a>

Replace highlighted RED color with your Link and Text
Yellow

Live Demo

<a href="YOUR-LINK-HERE" class="small yellow awesome">YOUR-TEXT-HERE</a>

Replace highlighted RED color with your Link and Text
Pink

Live Demo

<a href="YOUR-LINK-HERE" class="small pink awesome">YOUR-TEXT-HERE</a>

Replace highlighted RED color with your Link and Text

• Save it…

Are you happy with this post… leave a comment below………..

Posted in: Blogs and Websites