The number effect which could be made with CSS3 code makes the work of web designers easier. Ability to create a realistic image effects with only the code is very helpful for web designers to design a template that mild but still beautiful.
One of the coolest effects is the color gradient effects on an object. So we do not need to use another image to create a button that looks real, just simply use the code only.This time we will learn how to create Aqua 3D buttons with gradation effect.
To create a button as shown above, first go to your Blogger account,then go to the PAGE TAB –> EDIT HTML.
Find ]]></b:skin> code, and put the code below before ]]></b:skin> code.
#bgmenu {
width:100%;
height:30px;
}
#menu a {
font:12px verdana;
font-weight:bold;
color:#000;
text-shadow:0px 2px 3px #fff;
text-decoration:none;
}
#menu a:hover {
color:#fff;
text-shadow:0px 2px 3px #000;
text-decoration:none;
}
#menu li {
margin-right:10px;
float: left;
list-style: none;
}
.blue {
text-align:center;
background:-moz-linear-gradient(top, #005aff, #8bcdff);
width:80px;
padding:5px;
margin-bottom:10px;
-moz-border-radius:50px;
-moz-box-shadow:0px 5px 8px grey;
border:1px solid #005aff;
}
.gloss {
background:#fff;
height:5px;
margin:-5px 0px 15px 0px;
padding:5px 5px 5px 5px;
color:000;
-moz-border-radius:20px;
-moz-box-shadow:0px 2px 6px #999;
opacity:0.6;
}
.text {
margin-top:-25px;
color:#000;
font:14px trebuchet ms;
font-weight:bold;
opacity:0.9;
}
Then find </head> code, and put the code below after the code.
<div id="bgmenu">
<ul id="menu">
<li><div class="blue"><div class="gloss"></div><div class="text"><a href="#">Menu 1</a></div></div></li>
<li><div class="blue"><div class="gloss"></div><div class="text"><a href="#">Menu 2</a></div></div></li>
<li><div class="blue"><div class="gloss"></div><div class="text"><a href="#">Menu 3</a></div></div></li>
<li><div class="blue"><div class="gloss"></div><div class="text"><a href="#">Menu 4</a></div></div></li>
<li><div class="blue"><div class="gloss"></div><div class="text"><a href="#">Menu 5</a></div></div></li>
<li><div class="blue"><div class="gloss"></div><div class="text"><a href="#">Menu 6</a></div></div></li>
<li><div class="blue"><div class="gloss"></div><div class="text"><a href="#">Menu 7</a></div></div></li>
</ul></div>
Change “#" with another URL link, and Menu with another link title. Example :
<li><div class="blue"><div class="gloss"></div><div class="text"><a href="http://knowingzone.blogspot.com">Menu 1</a></div></div></li>
<li><div class="blue"><div class="gloss"></div><div class="text"><a href="http://knowingzone.blogspot.com/search/label/freetemplate">Free Template</a></div></div></li>
Save your template, and see what different in your blog.
Posting Komentar