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………..