1
Horizontal Menus / Dark Classic Buttons
« Last post by Swift on November 11, 2020, 02:54:31 PM »View Dark Classic Button Demo
Here is the HTML code for all four (4) Dark Classic Button options:
Here is the CSS code for all four (4) Dark Classic Button options:
Images for these are linked below. Save them into your "img" folder as linked to within the given css above. Change as needed. Enjoy!
Here is the HTML code for all four (4) Dark Classic Button options:
Code: [Select]
<!-- 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:
Code: [Select]
/* 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!
