Gradient fill your menu buttons with dynamic color and CSS
Menu button with gradient color using CSS code and picture. Use this free code to fade your menu buttons.
Free code, includes 1 transparent picture and dynamic CSS code
Hans G Bergstrom Consulting
home
next
CSS
#button { position:absolute; bottom:15px; width:100%; padding-left:15%; height:30px; margin:0; } #button li { display: inline; } #button a { overflow: hidden; float:left; width: 90px; height: 25px; display: block; text-align: center; color: #FFF; font-weight: bold; font-size: 12px; text-transform: uppercase; background-color: #000000; // change this color text-decoration:none; padding-top: 0px; padding-right: 5px; margin-right:2px; background-image: url(fade.png); // change if another directory } #button a:hover { width: 88px; height: 25px; padding-top: 0px; padding-right: 5px; color: #FFF; background-color: #000000; // change this color text-decoration: none; overflow: visible; background-position: top; border: #FF0000 solid thin; }
HTML
<div id="button"> <ul> <li><a href="#">home</a></li> <li><a href="#">next</a></li> </ul> </div>
Fading picture (fade.png):
Web functions: Web page | Menu button | Gradient color | Fade color | HTML / CSS
Gradient fill your menu buttons with dynamic color and CSSGradient fill your menu buttons with dynamic color and CSS