Themekings Custom Retro Website Design Discussions

ThemeKings Custom Menus => Horizontal Menus => Topic started by: Swift on November 11, 2020, 02:54:31 PM

Title: Dark Classic Buttons
Post by: Swift on November 11, 2020, 02:54:31 PM
View Dark Classic Button Demo (http://themekings.net/buttons/dark-classic/index.html)


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!  8)