CSS实现立体按钮效果

2020-03-24 16:47:17

字体：大中小

来源：转载

供稿：网友

style type="text/css"
#menu {display:block; position:relative; background:#edebdc; width:112px; padding:25px; border:1px solid #000; margin:0 auto;}
.white {position:absolute; width:100px; height:20px; color:#fff; background:#fff; border-top:1px solid #ffdc56; border-right:1px solid #957704; border-bottom:1px solid #937603; border-left:1px solid #ffdc56;overflow:hidden; text-align:center;}
.blackc {position:absolute; top:0; left:0; width:98px; height:18px; color:#000; font-family:verdana; font-size:11px; font-weight:bold; overflow:hidden; border-top:1px solid #ffd42e; border-right:1px solid #caa205; border-bottom:1px solid #c9a105; border-left:1px solid #ffd42e; overflow:hidden; text-align:center; line-height:15px; background:#fc0;}
.black {position:relative; top:0; left:0; width:102px; height:22px; border:1px solid #000;}
.cona {position:relative; top:0; left:0; width:105px; height:25px; border-top:1px solid #d5d3ca; border-left:1px solid #d5d3ca; background:#f7f6ef;}
.conb {position:relative; top:0; left:0; width:107px; height:27px; border-top:1px solid #b8b7af; border-left:1px solid #b8b7af; background:#f7f6ef;}
.conc {position:relative; top:0; left:0; width:109px; height:29px; border-top:1px solid #9c9b95; border-left:1px solid #9c9b95; background:#f7f6ef;}
.cond {position:relative; top:0; left:0; width:111px; height:31px; border-top:1px solid #d5d3ca; border-left:1px solid #d5dc3a; background:#fff; margin-top:2px;}
#menu a.switch:visited {text-decoration:none;}
#menu a.switch {color:#c00; text-decoration:none; position:absolute;}
#menu a.switch:hover {color:#c00; background:#edebdc; cursor:pointer;}
#menu a.switch:hover .white {position:absolute; width:100px; height:20px; color:#fff; background:#fff; border-bottom:1px solid #ffdc56; border-left:1px solid #957704; border-top:1px solid #937603; border-right:1px solid #ffdc56;overflow:hidden; text-align:center;}
#menu a.switch:hover .blackc {position:absolute; top:0; left:0; width:98px; height:18px; color:#000; font-size:11px; font-weight:bold; overflow:hidden; border-bottom:1px solid #ffd42e; border-left:1px solid #caa205; border-top:1px solid #c9a105; border-right:1px solid #ffd42e; overflow:hidden; text-align:center; line-height:17px; background:#eb0;}
/style
div id="menu"
div div div div div
a href="#nogo" span span title="Item one" ITEM ONE /span /span /a
/div /div /div /div /div
div div div div div
a href="#nogo" span span title="Item two" ITEM TWO /span /span /a
/div /div /div /div /div
div div div div div
a href="#nogo" span span title="Item three" ITEM THREE /span /span /a
/div /div /div /div /div
div div div div div
a href="#nogo" span span title="Item four" ITEM FOUR /span /span /a
/div /div /div /div /div
div div div div div
a href="#nogo" span span title="Item five" ITEM FIVE /span /span /a
/div /div /div /div /divhtml教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：CSS突破局限制作框列表效果

下一篇：CSS基础教程完全学习手册 (1)