为了网页的美观，有时候我们可能会需要实现按钮的效果，所以本篇文章我们就来介绍一下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;}例二：
CSS
.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视频教程栏目！！！
