Some peoples are use text to show some links they try much to get css button but failed.Now we can give free of price the css button.In this Button you will add link and text.To add the css button act on the following steps....
- Go to Blogger
- Click template
- Now go to edit Html
- Now find </b:template-skin>
- Tips press Ctrl + F to find
- Now paste the following text
<style type='text/css'>
ul#topnav {
margin: 10px 0 20px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 99%;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff;
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}
ul#topnav.v2 span{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg92Yr0iZWDeBgUemzmXFRCs5EkACgRRyeg-BCirMmu6glzyycl4bResYb7sCSCs8ayAgEtfnZvI2XWAOGbibiJ0n1YtKIFP4tB3vlRcAd6tEIVm7RG4OPF8DSeis1hZ59_U5x7-YpCCIw/s1600/menu-bg-b-w.png) repeat-x left top;
}
ul#topnav.v2 a{
color: #555;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg92Yr0iZWDeBgUemzmXFRCs5EkACgRRyeg-BCirMmu6glzyycl4bResYb7sCSCs8ayAgEtfnZvI2XWAOGbibiJ0n1YtKIFP4tB3vlRcAd6tEIVm7RG4OPF8DSeis1hZ59_U5x7-YpCCIw/s1600/menu-bg-b-w.png) repeat-x left bottom;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$("#topnav li").prepend("<span/>"); //Throws an empty span tag right before the a tag
$("#topnav li").each(function() { //For each list item...
var linkText = $(this).find("a").html(); //Find the text inside of the a tag
$(this).find("span").show().html(linkText); //Add the text in the span tag
});
$("#topnav li").hover(function() { //On hover...
$(this).find("span").stop().animate({
marginTop: "-40" //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find("span").stop().animate({
marginTop: "0" //Move the span back to its original state (0px)
}, 250);
});
});
</script>
- Now Paste the following text where you want the Css Button
<div class="container">
<ul id="topnav" class="v2"><center>
<li><a href="lin">Text</a></li>
<li><a href="Link">Text</a></li>
</center>
</ul>
</div>
