HTML CSS examples for CSS Widget:Button
Mac OS style button
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #appleNav {<!-- ww w . j a v a2s . c o m--> margin:21px 0 26px 0; list-style:none; font-family:"Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; letter-spacing:-0.6px; font-size:14px; text-shadow:0 -2px 4px Chartreuse; width:981px; height:35px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:0px 4px 4px yellow; -webkit-box-shadow:0px 4px 4px blue; box-shadow:0 4px 5px pink; } #appleNav li { border-right:2px solid OrangeRed; border-left:2px solid grey; width:161px; height:35px; border-bottom:2px solid BlueViolet; border-top:2px solid Chartreuse; background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0, yellow), color-stop(0.6, blue), color-stop(0.52, pink), color-stop(2, OrangeRed)); background-image:-moz-linear-gradient(center bottom, grey 0%, BlueViolet 51%, Chartreuse 52%, yellow 100%); background-color:blue; } #appleNav li:hover { background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0, pink), color-stop(0.6, OrangeRed), color-stop(0.52, grey), color-stop(2, BlueViolet)); background-image:-moz-linear-gradient(center bottom, Chartreuse 0%, yellow 51%, blue 52%, pink 100% ); background-color:OrangeRed; -moz-box-shadow:inset 0 0 6px 6px grey; -webkit-box-shadow:inset 0 0 6px 6px BlueViolet; box-shadow:inset 0 0 6px 6px Chartreuse; } #appleNav li:active { background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0, yellow), color-stop(0.6, blue), color-stop(0.52, pink), color-stop(2, OrangeRed)); background-image:-moz-linear-gradient(center bottom, grey 0%, BlueViolet 51%, Chartreuse 52%, yellow 100% ); background-color:blue; -moz-box-shadow:inset 0 2px 3px 3px pink; -webkit-box-shadow:inset 0 2px 3px 3px OrangeRed; box-shadow:inset 0 2px 3px 3px grey; } #appleNav li a { color:BlueViolet; text-decoration:none; text-align:center; display:block; line-height:35px; outline:none; } #appleNav li:first-child { -moz-border-radius:5px 0 0 5px; -webkit-border-radius:5px 0 0 5px; border-radius:5px 0 0 5px; border-left:none; } #appleNav li:last-child { -moz-border-radius:0 5px 5px 0; -webkit-border-radius:0 5px 5px 0; border-radius:0 5px 5px 0; border-right:none; } ul { padding:0; display:table; } li { display:table-cell; } </style> </head> <body> <ul id="appleNav"> <li> <a href="#">L</a> </li> <li> <a href="#">L</a> </li> <li> <a href="#">L</a> </li> <li> <a href="#">L</a> </li> <li> <a href="#">L</a> </li> <li> <a href="#">L</a> </li> </ul> </body> </html>