CSS按钮如何实现？CSS按钮实现的几种方法介绍

本文中所有这些按钮的结构只需要一个锚点标记就可以了，因为我们将使用:: before伪类创建其他元素。

例一：

首先，我们将给出按钮的一般样式，包括其活动状态。重要的是要注意相对定位，因为它将帮助我们稍后定位:: before元素：

CSS

.a_demo_one { 	background-color:#ba2323; 	padding:10px; 	position:relative; 	font-family: 'Open Sans', sans-serif; 	font-size:12px; 	text-decoration:none; 	color:#fff; 	border: solid 1px #831212; 	background-image: linear-gradient(bottom, rgb(171,27,27) 0%, rgb(212,51,51) 100%); 	border-radius: 5px; }  .a_demo_one:active { 	padding-bottom:9px; 	padding-left:10px; 	padding-right:10px; 	padding-top:11px; 	top:1px; 	background-image: linear-gradient(bottom, rgb(171,27,27) 100%, rgb(212,51,51) 0%); }

然后，我们使用:: before伪元素创建灰色容器。使用绝对的定位来定位我们的元素：

CSS

.a_demo_one::before { 	background-color:#ccd0d5; 	content:""; 	display:block; 	position:absolute; 	width:100%; 	height:100%; 	padding:8px; 	left:-8px; 	top:-8px; 	z-index:-1; 	border-radius: 5px; 	box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff; }

.a_demo_two { 	background-color:#6fba26; 	padding:10px; 	position:relative; 	font-family: 'Open Sans', sans-serif; 	font-size:12px; 	text-decoration:none; 	color:#fff; 	background-image: linear-gradient(bottom, rgb(100,170,30) 0%, rgb(129,212,51) 100%); 	box-shadow: inset 0px 1px 0px #b2f17f, 0px 6px 0px #3d6f0d; 	border-radius: 5px; }  .a_demo_two:active { 	top:7px; 	background-image: linear-gradient(bottom, rgb(100,170,30) 100%, rgb(129,212,51) 0%); 	box-shadow: inset 0px 1px 0px #b2f17f, inset 0px -1px 0px #3d6f0d; 	color: #156785; 	text-shadow: 0px 1px 1px rgba(255,255,255,0.3); 	background: rgb(44,160,202); }

由于伪元素的位置取决于其父元素，因此一旦父元素向下移动几个像素，就必须向上移动具有相同像素数量的伪元素。

CSS

.a_demo_two::before { 	background-color:#072239; 	content:""; 	display:block; 	position:absolute; 	width:100%; 	height:100%; 	padding-left:2px; 	padding-right:2px; 	padding-bottom:4px; 	left:-2px; 	top:5px; 	z-index:-1; 	border-radius: 6px; 	box-shadow: 0px 1px 0px #fff; }  .a_demo_two:active::before { 	top:-2px; }

我们要做的第一件事就是创造简单的部分。在这里，你会注意到一个右边距，这是为了补偿伪元素的宽度，如果你想让按钮居中。

.a_demo_three { 	background-color:#3bb3e0; 	font-family: 'Open Sans', sans-serif; 	font-size:12px; 	text-decoration:none; 	color:#fff; 	position:relative; 	padding:10px 20px; 	border-left:solid 1px #2ab7ec; 	margin-left:35px; 	background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%); 	border-top-right-radius: 5px; 	border-bottom-right-radius: 5px; 	box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999; }  .a_demo_three:active { 	top:3px; 	background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%); 	box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999; }

.a_demo_three::before { 	content:"·"; 	width:35px; 	max-height:29px; 	height:100%; 	position:absolute; 	display:block; 	padding-top:8px; 	top:0px; 	left:-36px; 	font-size:16px; 	font-weight:bold; 	color:#8fd1ea; 	text-shadow:1px 1px 0px #07526e; 	border-right:solid 1px #07526e; 	background-image: linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%); 	border-top-left-radius: 5px; 	border-bottom-left-radius: 5px; 	box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ; }  .a_demo_three:active::before { 	top:-3px; 	box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ; }

本篇文章到这里就已经全部结束了，更多精彩内容大家可以关注PHP中文网的CSS视频教程栏目！！！

以上就是CSS按钮如何实现？CSS按钮实现的几种方法介绍的详细内容，更多内容请关注技术你好其它相关文章！