View Dark Classic Button DemoHere is the HTML code for all four (4) Dark Classic Button options:
<!-- Dark Classic Horizontal Nav Menu -->
<div style="width:100%; margin-top:100px">
<div id="hz-menu">
<ul>
<li><a class="hz-button" href="#">Link Here[/url]</li>
<li><a class="hz-button" href="#">Link Here[/url]</li>
<li><a class="hz-button" href="#">Link Here[/url]</li>
<li><a class="hz-button" href="#">Link Here[/url]</li>
<li><a class="hz-button" href="#">Link Here[/url]</li>
</ul>
</div>
</div>
<!-- Dark Classic Version 2 Horizontal Nav Menu -->
<div style="width:100%; margin-top:100px">
<div id="hz-menu-v2">
<ul>
<li><a class="hz-v2-button" href="#">Link Here[/url]</li>
<li><a class="hz-v2-button" href="#">Link Here[/url]</li>
<li><a class="hz-v2-button" href="#">Link Here[/url]</li>
<li><a class="hz-v2-button" href="#">Link Here[/url]</li>
<li><a class="hz-v2-button" href="#">Link Here[/url]</li>
</ul>
</div>
</div>
<!-- Dark Classic Version 3 Horizontal Nav Menu -->
<div style="width:100%; margin-top:100px">
<div id="hz-menu-v3">
<ul>
<li><a class="hz-v3-button" href="#">Link Here[/url]</li>
<li><a class="hz-v3-button" href="#">Link Here[/url]</li>
<li><a class="hz-v3-button" href="#">Link Here[/url]</li>
<li><a class="hz-v3-button" href="#">Link Here[/url]</li>
<li><a class="hz-v3-button" href="#">Link Here[/url]</li>
</ul>
</div>
</div>
<!-- Dark Classic Version 4 Horizontal Nav Menu -->
<div style="width:100%; margin-top:100px">
<div id="hz-menu-v4">
<ul>
<li><a class="hz-v4-button" href="#">Link Here[/url]</li>
<li><a class="hz-v4-button" href="#">Link Here[/url]</li>
<li><a class="hz-v4-button" href="#">Link Here[/url]</li>
<li><a class="hz-v4-button" href="#">Link Here[/url]</li>
<li><a class="hz-v4-button" href="#">Link Here[/url]</li>
</ul>
</div>
</div>
Here is the CSS code for all four (4) Dark Classic Button options:
/* Dark Classic Horizontal Nav Menu */
#hz-menu {
margin: 0px auto 0px auto;
padding: 0px;
width: 640px;
height: 30px;
position: relative;
overflow: hidden;
list-style-type: none;
}
#hz-menu ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
#hz-menu ul li {
padding: 0px;
margin: 0px 4px 0px 4px;
width: 120px;
height: 30px;
position: relative;
overflow: hidden;
float: left;
text-align: center;
line-height: 28px;
font-weight: bold;
text-decoration: none;
font-size: 100%;
font-style: normal;
}
a.hz-button:link, a.hz-button:visited {
background: url('http://themekings.net/buttons/dark-classic/img/version-1.jpg') no-repeat 0 0;
width: 120px;
height: 30px;
display: block;
color: #E4E4E4;
text-decoration: none;
}
a.hz-button:hover {
background-position: 0 -30px;
color: #E4E4E4;
text-decoration: none;
}
a.hz-button:active {
background-position: 0 -60px;
color: #333333;
text-decoration: none;
}
/* Dark Classic Version 2 Horizontal Nav Menu */
#hz-menu-v2 {
margin: 0px auto 0px auto;
padding: 0px;
width: 720px;
height: 46px;
position: relative;
overflow: hidden;
list-style-type: none;
}
#hz-menu-v2 ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
#hz-menu-v2 ul li {
padding: 0px;
margin: 0px 4px 0px 4px;
width: 136px;
height: 46px;
position: relative;
overflow: hidden;
float: left;
text-align: center;
line-height: 44px;
font-weight: bold;
text-decoration: none;
font-size: 100%;
font-style: normal;
}
a.hz-v2-button:link, a.hz-v2-button:visited {
background: url('http://themekings.net/buttons/dark-classic/img/dark-classic-v2.png') no-repeat 0 0;
width: 136px;
height: 46px;
display: block;
color: #E4E4E4;
text-decoration: none;
}
a.hz-v2-button:hover {
background-position: 0 -46px;
color: #E4E4E4;
text-decoration: none;
}
a.hz-v2-button:active {
background-position: 0 -92px;
color: #333333;
text-decoration: none;
}
/* Dark Classic Version 3 Horizontal Nav Menu */
#hz-menu-v3 {
margin: 0px auto 0px auto;
padding: 0px;
width: 700px;
height: 42px;
position: relative;
overflow: hidden;
list-style-type: none;
}
#hz-menu-v3 ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
#hz-menu-v3 ul li {
padding: 0px;
margin: 0px 4px 0px 4px;
width: 132px;
height: 42px;
position: relative;
overflow: hidden;
float: left;
text-align: center;
line-height: 42px;
font-weight: bold;
text-decoration: none;
font-size: 100%;
font-style: normal;
}
a.hz-v3-button:link, a.hz-v3-button:visited {
background: url('http://themekings.net/buttons/dark-classic/img/dark-classic-v3.jpg') no-repeat 0 0;
width: 132px;
height: 42px;
display: block;
color: #E4E4E4;
text-decoration: none;
}
a.hz-v3-button:hover {
background-position: 0 -42px;
color: #E4E4E4;
text-decoration: none;
}
a.hz-v3-button:active {
background-position: 0 -84px;
color: #333333;
text-decoration: none;
}
/* Dark Classic Version 4 Horizontal Nav Menu */
#hz-menu-v4 {
margin: 0px auto 0px auto;
padding: 0px;
width: 800px;
height: 52px;
position: relative;
overflow: hidden;
list-style-type: none;
}
#hz-menu-v4 ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
#hz-menu-v4 ul li {
padding: 0px;
margin: 0px 4px 0px 4px;
width: 152px;
height: 52px;
position: relative;
overflow: hidden;
float: left;
text-align: center;
line-height: 54px;
font-weight: bold;
text-decoration: none;
font-size: 100%;
font-style: normal;
}
a.hz-v4-button:link, a.hz-v4-button:visited {
background: url('http://themekings.net/buttons/dark-classic/img/dark-classic-v4.png') no-repeat 0 0;
width: 152px;
height: 52px;
display: block;
color: #E4E4E4;
text-decoration: none;
}
a.hz-v4-button:hover {
background-position: 0 -52px;
color: #E4E4E4;
text-decoration: none;
}
a.hz-v4-button:active {
background-position: 0 -104px;
color: #333333;
text-decoration: none;
}Images for these are linked below. Save them into your "img" folder as linked to within the given css above. Change as needed. Enjoy!
