投稿
  1. 125jz首页
  2. 教程
  3. 网页制作

巧用边框线实现立体按钮效果（纯CSS）

江山如画 • • 网页制作 • 阅读 4778

本文教你使用CSS制作立体按钮，代码简单。

巧用边框线实现立体按钮效果（纯CSS）

本文教你用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

赞 (0)
江山如画的头像江山如画管理团队
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2020年1月31日 下午9:37
下一篇 2020年2月2日 下午5:29

99%的人还看了以下文章

发表回复

登录后才能评论