本文教你用CSS制作立体按钮，实现简单。
页面代码:
<div id="navigation">
<ul>
<li class="recipes"><a href="http://www.125jz.com">中国网页设计</a></li>
<li class="recipes"><a href="http://www.125jz.com">中国网页设计</a></li>
</ul>
</div>
将LI定义为按钮样式，鼠标放上后显示出立体效果，整体视觉体验舒服，代码兼容性好，简洁高效。
CSS代码：
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
padding-top: 4px;
}
#navigation li {
display: inline;
}
#navigation a:link, #navigation a:visited {
margin-right: 2px;
padding: 8px 15px 8px 15px;
color: #A62020;
background-color: #FCE6EA;
text-decoration: none;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-bottom: 1px solid #717171;
border-right: 1px solid #717171;
}
#navigation a:hover {
border-top: 1px solid #717171;
border-left: 1px solid #717171;
border-bottom: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/4653.html
微信扫一扫 
支付宝扫一扫 