伪元素应用制作Button

最新推荐文章于 2024-06-24 17:01:01 发布

编程之上

最新推荐文章于 2024-06-24 17:01:01 发布

阅读量1.4k

点赞数

分类专栏： css&css3

本文链接：https://blog.csdn.net/ruizhengyun/article/details/8772862

版权

本文介绍了如何利用CSS的伪元素技术来实现一个Button的效果。通过HTML定义基础结构，然后使用`:before`和`:after`伪元素添加按钮的装饰元素，结合CSS样式完成按钮的视觉设计。

摘要由CSDN通过智能技术生成

效果

HTML

<div class="article">
  <h3>目的</h3>
  <p>再次领会了CSS3的强大，充分利用:before和:after两个方法，同时中间还涉及到了线性渐变。</p>
</div>
<div style="btnBox"> <a href="#" class="btn btn_demo1">DEMO1</a> <a href="#" class="btn btn_demo2">DEMO2</a><a href="#" class="btn btn_demo3">DEMO3-1</a><a href="#" class="btn btn_demo3 second_button">DEMO3-2</a><a href="#" class="btn btn_demo3 third_button">DEMO3-3</a><a href="#" class="btn btn_demo4">DEMO4</a><a href="#" class="btn btn_demo5">DEMO5</a> </div>

CSS

body {
	padding:0;
	margin:0 auto;
	width:700px;
	font:1em/1.4 Cambria, Georgia, sans-serif;
	color:#333;
	background:#fff;
}
.article h3 {
	font-size:18px;
	font-weight:bold;
	color:#51B148;
}
.article p {
	line-height:24px;
}
.btnBox {
	margin:10px 0 0;
}
.btn {
	float:left;
	margin:0 20px 20px 0;
	background-color:#3bb3e0;
	padding:6px 10px;
	position:relative;
	font-family:"Microsoft yahei", "宋体", Arial, Helvetica, sans-serif;
	font-size:16px;
	text-decoration:none;
	color:#fff;
	border: solid 1px #186f8f;
	background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
	background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(44,160,202)), color-stop(1, rgb(62,184,229)));
	-webkit-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
	-moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
	box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
}
.btn_demo1::before {
 background-color:#ccd0d5;
 content:"";
 display:block;
 position:absolute;
 width:100%;
 height:100%;
 padding:8px;
 left:-8px;
 top:-8px;
 z-index:-1;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 -o-border-radius: 5px;
 border-radius: 5px;
 -webkit-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
 -moz-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
 -o-box-shadow: inset 0p