超漂亮的CSS3菜单按钮风格

2020-01-27 14:17:23

字体：大中小

来源：转载

供稿：网友

收集了一些超漂亮的CSS3菜单按钮风格，个个精彩，都是圆角的，遗憾的是目前IE8不支持这种效果，留下来供学习参考吧。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">    <head>        <style>            .button{                padding:5px 15px 5px 15px;                text-decoration: none;                display: inline-block;                -moz-border-radius: 10px;                -webkit-border-radius: 10px;                -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);                -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);                border-bottom: 1px solid rgba(0,0,0,0.25);                font-family: "Lucida Grande",Lucida,Verdana,sans-serif;                outline:none;                position:relative;                font-size: 32px;                margin:10px;                background:transparent url(buttonover.png) repeat-x top left;                white-space:nowrap;            }            .button:hover{                background-color: #777;            }            .button:active{                top: 1px;                left:1px;            }            .shadow{                background-color: #a3a3a3;                border: 2px solid #777;                color: #FFF;                font-weight:bold;                text-shadow: 0 1px 1px rgba(0,0,0,0.8);            }            .engraved{                background: #666;                border: 2px solid #777;                color: #000;                text-shadow: 0px 1px 1px #fff;                font-weight: bold;            }            .glow{                color: #fff;                background: #888;                border: 2px solid #777;                text-shadow: 1px 1px 6px #fff;            }            .white{                color: #fff;                background: #fff;                text-shadow: 1px 1px 4px #000;                border: 2px solid #f0f0f0;                font-family: "Arial";                font-weight:bold;                text-transform:uppercase;                letter-spacing:-1px;            }            .white:hover{                background-color:#f1f1f1;            }            .red{                background-color: #B00000;                border: 1px solid #7F0000;                color: #FFF;                text-shadow: 1px 1px 4px #000;                font-family: "Palatino Linotype";            }            .red:hover{                background-color:#800000;            }            .lightblue{                background-color: #7FB0F0;                color: #FFF;                text-shadow: 0 -1px 1px rgba(0,0,0,0.25);                font-weight:100;            }            .lightblue:hover{                background-color:#7FA0C0;            }            .olive{                background-color: #B0E000;                border: 1px outset #D0E000;                color: #FFF;                font-style:italic;                text-shadow: 0 2px 1px rgba(0,0,0,0.2);            }            .olive:hover{                background-color: #90A000;            }            .orange{                background-color: #FFCC00;                border: 1px outset #F2FF00;                color: #FFF;                font-family:Helvetica;                font-weight:bold;            }            .orange:hover{                background-color: #FF8000;            }            .pink{                background-color: #C0107F;                border: 1px outset #70107F;                color: #FFF;                font-family:"Georgia";                font-weight:bold;            }            .pink:hover{                background-color: #F0107F;            }            .pink:active{                border: 1px inset #70107F;            }            .sea{                background-color: #20807F;                color: #FFF;            }            .sea:hover{                background-color: #60807F;            }            .rose{                background-color: #F07FD0;                color: #FFF;                font-family: "Palatino Linotype";                font-style: italic;                letter-spacing:-1px;                text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);            }            .rose:hover{                background-color: #B07FA0;            }            .black{                background-color: #000;                background-image:url(buttonover2.png);                color: #FFF;                letter-spacing:-1px;                text-shadow: 0 2px 1px rgba(0,0,0,0.2);            }            .black:hover{                background-color: #777;            }            .sand{                background-color: #FFF090;                background-image:url(buttonover2.png);                color: #fff;                letter-spacing: 3px;                text-shadow: 1px 0px 1px rgba(0,0,0,0.2);            }            .sand:hover{                background-color: #F0C07F;            }            .violet{                background-color: #9400D3;                background-image:url(buttonover2.png);                color: #777;                font-family:"Arial Black";                text-shadow: 0px 1px 1px #fff;            }            .violet:hover{                background-color: #8A2BE2;            }            .green{                background-color: #32CD32;                background-image:url(buttonover2.png);                color: #fff;                font-family:"Century Gothic";                text-transform:uppercase;                font-style:italic;                text-shadow: 1px 0px 1px rgba(0,0,0,0.2);            }            .green:hover{                background-color: #2F4F4F;            }            .darkblue{                background-color: #00008B;                background-image:url(buttonover2.png);                color: #fff;                font-family:"Impact";                text-shadow: 1px 0px 1px rgba(0,0,0,0.2);            }            .darkblue:hover{                background-color: #191970;            }            .sunset{                background-color: #FF6347;                background-image:url(buttonover2.png);                color: #777;                font-family:"Palatino Linotype";                text-transform:uppercase;                text-shadow: 0px 1px 1px #fff;            }            .sunset:hover{                background-color: #FF7F50;            }            .choco{                background-color: #D2691E;                background-image:url(buttonover2.png);                color: #fff;                font-family:"Gill Sans";                text-shadow: 1px 0px 1px rgba(0,0,0,0.2);            }            .choco:hover{                background-color: #D2B48C;            }            .cadet{                background-color: #5F9EA0;                background-image:url(buttonover2.png);                color: #fff;                font-family: "Arial Narrow";                text-shadow: 1px 0px 1px rgba(0,0,0,0.2);            }            .cadet:hover{                background-color: #008080;            }            .aqua{                background-color: #00FFFF;                background-image:url(buttonover2.png);                color: #fff;                font-family: "Tahoma";                text-shadow: 1px 1px 4px #000;            }            .aqua:hover{                background-color: #00FFCC;            }        </style>    </head>    <body style="background-color:#888;">        <a href="#" class="button shadow">Cool Shadow</a>        <a href="#" class="button engraved">Dark Engraved</a>        <a href="#" class="button glow">Mystic Glow</a>        <a href="#" class="button white">Frozen White</a>        <a href="#" class="button red">Sexy Red</a>        <a href="#" class="button lightblue">Heavenly Blue</a>        <a href="#" class="button olive">Olive Outset</a>        <a href="#" class="button orange">Juicy Orange</a>        <a href="#" class="button pink">Lovely Pink</a>        <a href="#" class="button sea">Deep Sea</a>        <a href="#" class="button rose">Rose Vanity</a>        <a href="#" class="button black">Buttonize Gray</a>        <a href="#" class="button sand">Dreamy Sand</a>        <a href="#" class="button violet">Violent Violet</a>        <a href="#" class="button green">Grasshopper</a>        <a href="#" class="button darkblue">Ocean Blue</a>        <a href="#" class="button sunset">Golden Sunset</a>        <a href="#" class="button choco">Sweet Chocolate</a>        <a href="#" class="button cadet">Cadet Dreams</a>        <a href="#" class="button aqua">Aqua Love</a>    </body></html>

上一篇：HTML5蓝色海洋

下一篇：CSS3制作W3cplus的关注面板