Seo Master present to you:
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.
- 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
Are you happy with this post… leave a comment below………..
2013, By: Seo Master
