超漂亮的CSS3菜單按鈕風格

2024-09-05 12:17:17

字體：大中小

來源：轉載

供稿：網友

收集了一些超漂亮的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;">        Cool Shadow        Dark Engraved        Mystic Glow        Frozen White        Sexy Red        Heavenly Blue        Olive Outset        Juicy Orange        Lovely Pink        Deep Sea        Rose Vanity        Buttonize Gray        Dreamy Sand        Violent Violet        Grasshopper        Ocean Blue        Golden Sunset        Sweet Chocolate        Cadet Dreams        Aqua Love    </body></html>

上一篇：CSS3制作W3cplus的關注面板

下一篇：HTML5藍色海洋