巧用边框线实现立体按钮效果(纯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%的人还看了以下文章

  • 第8课:组织元素(span和div)

    pan和div元素用于组织和结构化文档,并经常联合class和id属性一起使用。 在这一课中,我们将进一步探究span和div的用法,因为这两个HTML元素对于CSS是很重要的。 用span组织元素 用div组织元素 用span组织元素 span元素可以说是一种中性元素,因为它不对文档本身添加任何东西。但是与CSS结合使用的话,span可以对文档中的部分文本…

    2020年2月25日
    1.6K0
  • 第3课:颜色与背景

    本课,你将学习如何在网站上应用颜色与背景。我们还会介绍用于定位和控制背景图像的高级方法。

    2020年2月22日
    1.7K0
  • 3种纯CSS/jquery实现的表格隔行变色,鼠标悬停:hover变色效果

    表格隔行显示不同背景颜色,表格奇数行和偶数行交替显示不同的背景颜色。 一、纯CSS3实现表格隔行变色 关键CSS代码介绍 table tr:nth-child(odd){background:#F4F4F4;} table td:nth-child(even){color:#C00;} table tr:nth-child(5){background:#73…

    2018年9月5日
    3.6K0
  • 纯CSS实现表格的自适应布局

    本文分享了一种用纯CSS实现的表格自适应布局,主要用到伪元素:before。

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

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

    2018年9月12日
    2.5K0
  • 跟永哥学HTML5(2):html5与html4的区别

    我们现在web前端开发的网页,一般都是html4.0。很多以前学过HTML 4.0的朋友可能此时会感到很迷惑,html 4.0和HTML5有什么区别? hmtl5与html4的区别? 先来看看HTML5推出的理由: 解决Web浏览器间的兼容性问题 在一个浏览器中可以运行的HTML、Css、Javascript,在另一个浏览器中不能运行。原因:各浏览器规范不统…

    2018年1月21日
    1.8K0

发表回复

登录后才能评论