Friday 28 June 2013

Stylish pure CSS Menu (Horizontal Menu)

Today iam design pure css  model menu .
It is very easy to add to your website with little efforts .
Demo Click here
Installation steps:
<div id="header-new1">
<div id="main-nav-holder1" style="padding-top: 20px;">
<a href="#" style="margin-left:0;">Home</a>
<a href="#">products</a>
<a href="#">Dreamtheweb.com</a>
<a href="#">Css scripts</a>
<a href="#">Java Scripts</a>
<a href="#">Templates</a>
<a href="#">wordpress</a>
<a href="#" style="margin-right:0;padding:5px 10px;">FAQ</a>
</div>
</div>

CSS Section :
a
{
color: #92b932;
text-decoration: none;
}

.buttonNew
{

background: -webkit-gradient(
linear, left top, left bottom,
from(#9edc71),
color-stop(0.29, #70c939),
to(#6ac532));
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #63b32e;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.6);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.6);
text-shadow:
0px 1px 5px rgba(000,000,000,1),
0px 1px 0px rgba(255,255,255,0.2);
font-weight:bold;
-webkit-transition: box-shadow 1s ease-in-out, color 1s ease-in-out;
-moz-transition: box-shadow 1s ease-in-out, color 1s ease-in-out;
-o-transition: box-shadow 1s ease-in-out, color 1s ease-in-out;
transition: box-shadow 1s ease-in-out, color 1s ease-in-out;
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.6);
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
color: #f0f0f0;
padding: 5px 11px;
margin: 0 2px;
background:#9edc71;
background: -moz-linear-gradient(
top,
#9edc71 0%,
#70c939 29%,
#6ac532);

}
.buttonNew:hover
{
border: 1px solid rgba(0,0,0,0.2);
text-shadow: #ffffff 0 1px 0;
background: #a8a8a8;
background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#a8a8a8));
background: -webkit-linear-gradient(top, #e3e3e3, #a8a8a8);
background: -moz-linear-gradient(top, #e3e3e3, #a8a8a8);
background: -ms-linear-gradient(top, #e3e3e3, #a8a8a8);
background: -o-linear-gradient(top, #e3e3e3, #a8a8a8);
background-image: -ms-linear-gradient(top, #e3e3e3 0%, #a8a8a8 100%);

color: #5a5a5a !important;
}
.buttonNew:active
{
text-shadow: #ffffff 0 1px 0;
border: 1px solid rgba(0,0,0,0.2);
background: #949494;
background: -webkit-gradient(linear, left top, left bottom, from(#d6d6d6), to(#a8a8a8));
background: -webkit-linear-gradient(top, #d6d6d6, #949494);
background: -moz-linear-gradient(top, #d6d6d6, #949494);
background: -ms-linear-gradient(top, #d6d6d6, #949494);
background: -o-linear-gradient(top, #d6d6d6, #949494);
background-image: -ms-linear-gradient(top, #d6d6d6 0%, #949494 100%);
color: #000000 !important;
}

0 comments:

Post a Comment