ThemeKings Blog

H-Tech Buttons

Posted by:

5 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 (Red background)
  • Rollover (Orange background)
  • Click (Green background)

View button image used in this horizontal menu

The button size for this menu is;

  • Width: 170px
  • Height: 67px
  • Right and Left margin is set to 4px and can be changed
  • Width of the 5 button horizontal menu in this demo is 890px

See Preview Of This Horizontal HTML Menu

These buttons look great over dark colored backgrounds as seen by clicking on the image below.
h-tech css buttons

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>
	</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: #222222;
}




/* == HORIZONTAL NAVIGATION MENU == */
#hz-menu {
	margin: 80px auto 0px auto;
	padding: 0px;
	width: 890px;
	height: 67px;
	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 4px 0px 4px;
	width: 170px;
	height: 67px;
	position: relative;
	overflow: hidden;
	float: left;
	text-align: center;
	line-height: 72px;
	font-weight: bold;
	text-decoration: none;
	font-size: 100%;
	color: #1B1B1B;
}
a.hz-button {
	background: url('../images/red-orange-buttons.png') no-repeat 0px 0px;
	width: 170px;
	height: 67px;
	display: block;
	text-decoration: none;
	color: #1B1B1B;
}
a.hz-button:hover {
	background-position: 0px -67px;
	text-decoration: none;
	color: #000000;
}
a.hz-button:active {
	background-position: 0px -134px;
	text-decoration: none;
	color: #1B1B1B;
}
 
0
  Related Posts
  • No related posts found.

You must be logged in to post a comment.