巧用边框线实现立体按钮效果(纯CSS)

本文教你使用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)
江山如画的头像江山如画管理团队
上一篇 2020年1月31日 下午9:37
下一篇 2020年2月2日 下午5:29

99%的人还看了以下文章

  • 第10课:外边距和内边距

    上一课,你学习了盒状模型。在这一课,我们将了解如何通过设置margin(外边距)和padding(内边距)这两个CSS属性来改变元素的显示。 为元素设置外边距 为元素设置内边距 为元素设置外边距 一个元素有上(top)、下(bottom)、左(left)、右(right)四个边。外边距(margin)表示从一个元素的边到相邻元素(或者文档边界)之间的距离。可…

    2020年2月25日
    3.0K0
  • 网页设计常见css3动画效果(摆动、缩放、旋转、透明、反弹)

    网页上常看到某个DIV或图片有渐入、摆动、缩放、旋转、透明、反弹等效果,今天分享给大家! <!DOCTYPE html> <html> <head> <meta name=”viewport” content=”initial-scale=1.0, maximum-scale=1.0, user-scalable=n…

    2022年5月9日
    2.4K0
  • 第2课:HTML是什么?

    HTML是什么? HTML是一门语言,它令我们可以在因特网上展示信息。你所看到的网页,是浏览器对HTML进行解释的结果。要查看一个网页的HTML代码,只需在浏览器菜单栏上点击“查看”,然后选择“源文件”即可。 对于生手来说,HTML代码看似很复杂,不过本教程将帮助你弄清楚它们的含义。 HTML能用来做什么? 如果你要制作网站的话,学习HTML是不可避免的。即…

    2018年1月20日
    4.3K0
  • CSS3 transform:rotate()制作旋转图片

    在《CSS3 transition transform属性及实例详解》中我们实现了:鼠标放到图片上,图片等比例放大的效果,今天分享transform:rotate()制作旋转图片。 CSS3中的transform:rotate()可以实现旋转功能,可以在CSS里面设定旋转的角度,也可以设定旋转用多少时间来完成。 旋转图片HTML代码 <img src=…

    2019年1月29日
    6.6K1
  • 跟永哥学HTML5(6)H5语义化标记使用示例

    介绍了HTML5中新增的语义化标记article section aside hgroup header footer nav time mark figure figcaption,对各个标记给出解释和应用示例。

    2020年2月12日
    2.5K0
  • 网页制作常用正则表达式大全、正则表达式在线测试工具

    正则表达式,用一段非常简短的表达式语句,便能够快速实现一个非常复杂的业务逻辑。正则表达式经常被用于字段或任意字符串的校验。熟练地掌握正则表达式的话,能够使你的开发效率得到极大的提升。 正则表达式在线测试工具 regex101是一个非常不错的正则表达式在线测试工具,你可以直接在线测试你的正则表达式。 网页制作常用正则表达式 1 用户名正则 //用户名正则,4到…

    2018年9月12日
    3.9K0

发表回复

登录后才能评论