• Horizontal CSS Menus
• Vertical CSS Menus
• Image CSS
• Form CSS
• DIVs and containers
• Links & Buttons
• CSS3 demos
• Other
• Browse All

• Hosting Discounts

• Layouts Index
• Two Columns
• Three Columns
• Fixed layouts
• Liquid Layouts
• CSS Frames

CSS Library: Horizontal CSS Menus: Here

Vista Aero Buttons Menu

Author: Dynamic Drive

This menu consists of a row of independent, Vista aero looking CSS buttons, and departs from the typical list based menu structure. Each button appears initially faded out slightly via CSS opacity, then brought back to full opacity during the "hover" state. The caveat for this menu is the fixed height of each button based on the graphic interface, hence isn't ideal if the buttons' font size is changed from the default.

Demo:

The two images used:

(black theme)

The CSS:

<style type="text/css"> .aerobuttonmenu{ /*container that holds a row of aero buttons*/ overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */ width: auto; background: #F7F7F7; /*menu strip background*/ border: 1px solid gray; padding: 4px 0; border-width: 1px 0; } * html .aerobuttonmenu{ /*IE6 and below hack. Set explicit strip width*/ width: 100%; } .aerobuttonmenu a.aero{ /*aero button CSS*/ background: transparent url('media/aeroleft.gif') no-repeat top left; display: block; float: left; font: bold 13px Verdana, Trebuchet MS; /* Change 13px as desired */ line-height: 23px; /* This value + 8px should equal height of button background (default is 31px) */ height: 31px; /* Height of button background height */ padding-left: 10px; /* Width of left menu image */ text-decoration: none; margin-right: 5px; /*spacing between buttons*/ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); /*this and next two rules control opacity of buttons before hover*/ opacity: 0.9; -moz-opacity: 0.9; } .aerobuttonmenu a.aero:link, .aerobuttonmenu a.aero:visited, .aerobuttonmenu a:active{ color: white; /*button text color*/ } .aerobuttonmenu a.aero span{ background: transparent url('media/aeroright.gif') no-repeat top right; display: block; padding: 4px 10px 6px 0; /*Set 10px here to match value of 'padding-left' value above*/ } .aerobuttonmenu a.aero:hover{ /* Hover state CSS */ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); /*this and next two rules control opacity of buttons during hover*/ opacity: 1; -moz-opacity: 0.99; } .aerobuttonmenu a.aero:hover span{ /* Hover state CSS (for text) */ color: yellow; } .black a.aero{ background-image: url('media/aeroleftblack.gif'); } .black a.aero span{ background-image: url('media/aerorightblack.gif'); } .aerobuttonmenu .rightsection{ float: right; width: 100px; position: relative; top: 3px; padding-right: 5px; text-align: right; } .aerobuttonmenu .rightsection a{ color: navy; } </style>

The HTML:

<h4>Aero Blue and Black Button Menus:</h4> <div class="aerobuttonmenu"> <div class="rightsection"> <a href="#"><img src="http://i31.tinypic.com/33mpnon.png" border="0" alt="search" /></a> </div> <a href="http://www.dynamicdrive.com" class="aero"><span>Home</span></a> <a href="http://www.dynamicdrive.com/style/" class="aero"><span>CSS Examples</span></a> <a href="http://www.dynamicdrive.com/forums/" class="aero"><span>Forums</span></a> <a href="http://tools.dynamicdrive.com" class="aero"><span>Webmaster Tools</span></a> <a href="http://www.javascriptkit.com" class="aero"><span>JavaScript</span></a> <a href="http://www.cssdrive.com" class="aero"><span>Gallery</span></a> </div> <br /> <div class="aerobuttonmenu black"> <div class="rightsection"> <a href="#"><img src="http://i31.tinypic.com/33mpnon.png" border="0" alt="search" /></a> </div> <a href="http://www.dynamicdrive.com" class="aero"><span>Home</span></a> <a href="http://www.dynamicdrive.com/style/" class="aero"><span>CSS Examples</span></a> <a href="http://www.dynamicdrive.com/forums/" class="aero"><span>Forums</span></a> <a href="http://tools.dynamicdrive.com" class="aero"><span>Webmaster Tools</span></a> <a href="http://www.javascriptkit.com" class="aero"><span>JavaScript</span></a> <a href="http://www.cssdrive.com" class="aero"><span>Gallery</span></a> </div>

Copyright 2006-2016 Dynamic Drive