Dark Gloss Buttons

Posted by:

6 Button Horizontal Menu

This CSS and HTML Horizontal Button Menu embeds a transparent image that works
best when used over a darker background (body). This button features 3 states.
They are;

  • Active (Dark brown background)
  • Rollover (Light brown background)
  • Click (Tan background)

View button image used in this horizontal menu

The button size for this menu is;

  • Width: 136px
  • Height: 42px
  • Right and Left margin is set to 2px and can be changed
  • Width of the 6 button horizontal menu in this demo is 840px

See Preview Of This 6 Button Horizontal HTML Menu

Other color options are available. See demo link above for more info.

HTML Coding for CSS and HTML Webpage Menu

<div id="hz-menu">

	<ul>
		<li><a class="hz-button" href="#">Link 1</a></li>
		<li><a class="hz-button" href="#">Link 2</a></li>
		<li><a class="hz-button" href="#">Link 3</a></li>
		<li><a class="hz-button" href="#">Link 4</a></li>
		<li><a class="hz-button" href="#">Link 5</a></li>
		<li><a class="hz-button" href="#">Link 6</a></li>
	</ul>

</div>

5 Button CSS Style Sheet

/* == BODY == */

body {
	font-family: 'Aldrich', sans-serif;
	font-size: .8em;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	text-decoration: none;
	background-color: #231E0C;
}




/* == HORIZONTAL NAVIGATION MENU == */
#hz-menu {
	margin: 80px auto 0px auto;
	padding: 0px;
	width: 840px;
	height: 42px;
	position: relative;
	overflow: visible;
	list-style-type: none;
}
#hz-menu ul {
	padding: 0px;
	margin: 0px;
	list-style-type: none;
}
#hz-menu ul li {
	padding: 0px;
	margin: 0px 2px 0px 2px;
	width: 136px;
	height: 42px;
	position: relative;
	overflow: hidden;
	float: left;
	text-align: center;
	line-height: 44px;
	font-weight: bold;
	text-decoration: none;
	font-size: 100%;
	color: #C0A34F;
}
a.hz-button {
	background: url('../images/dark-gloss.png') no-repeat 0px 0px;
	width: 136px;
	height: 42px;
	display: block;
	text-decoration: none;
	color: #C0A34F;
}
a.hz-button:hover {
	background-position: 0px -42px;
	text-decoration: none;
	color: #231E0C;
}
a.hz-button:active {
	background-position: 0px -84px;
	text-decoration: none;
	color: #1B1B1B;
}

 
0
  Related Posts
  • No related posts found.

You must be logged in to post a comment.