本文包含HTML效果，阅读原文以体验最佳效果：原文
按钮在各种软件的开发中几乎都是少不了的部分，好看的按钮有很多。今天我们来试着使用CSS制作简单的凸出按钮。
凸出按钮，顾名思义就是让用户觉得它是凸出于网页这个平面的，点击的时候会把它戳进去。 很多按钮都会有这样的效果，因为这的确是不错的用户体验。我们要做的是以CSS3为基础的简单凸出按钮。
文字凸出按钮
目标效果
核心知识点text-shadow
在CSS3中有两个创建投影的属性，它们分别是text-shadow和box-shadow。其中text-shadow 是为文字创建投影的，而text-shadow是为标签实际位置占用创建投影。
了解投影的人应该很多，用来区分同色范围和体现层次效果非常好用。 并且它也是CSS绘图技术中的一大势力。通过before、after和box-shadow 三个属性最多可以让一个标签绘制6个形状。再配合背景绘图技术可以让一个标签的效果十分丰富。
如果对相关的CSS绘图技术感兴趣的可以看看国外大神作的一个DIV完成的效果集:
One DIV
那么说一说text-shadow的基本用法吧。
.demo{
text-shadow:5px 5px 3px #444;
}
Demo 水平 竖直 模糊 颜色
在text-shadow属性中有4个参数，分别是水平位移、竖直位移、模糊范围以及投影颜色。 可以当做一个简单的PS中的投影使用。不过投影的目标是文字，文字外的其他部分不会受到任何影响。 了解了text-shadow的用法哪我们的凸出按钮的原理也很清楚了。
text-shadow: 0px 5px 0px #9c936a;
首先使用text-shadow创建一个不模糊、不透明并且在文字下方的“投影”。 投影的颜色使用比文字颜色暗一些的颜色，然后调整竖直距离到合适位置。 这里适合使用一些粗一些的字体，这里我使用的是粗体微软雅黑。
:hover{
color:#fff;
text-shadow: 0px 5px 0px #aca37a;
}
:active{
transform: translateY(5px);
-webkit-transform: translateY(5px);
text-shadow: 0px 0px 0px #aca37a;
}
然后我们为它加入hover的颜色过渡和active的位移过渡以及投影位移过渡。 用户按下后文字整体下沉，投影上移与文字重叠，以此制作出用户按下按钮的效果。 值得我们注意的是这里如果我们的对象的display属性值为inline的话是十分影响transform 位移的效果的，为了避免不必要的麻烦最好将它设置成其他值，这里我将标签的display设置为了 inline-block。
下面是整体的代码实现:
文字凸出按钮
虽然我们不能直接对图标进行投影，但是我们可以将图标转换成字体或者直接使用现成的图标字体。 它在Web中可以使用和文字完全相同的特性。
阿里巴巴适量字体图标库
块级凸出按钮
其实了解了文字凸出按钮的实现方法，块级凸出按钮的实现方法是一样的。 无非就是把文字的投影转移到了“块”上面。
目标效果
上面的内容就是将text-shadow换成box-shadow做成的。
叠加实验
依然是那句话，不把一个属性玩坏的前端工程师不是一个好绅士。我们来试试一些组合。
text-shadow+box-shadow
上面我们简单的将text-shadow和box-shadow组合在一起。 不过因为文字的位置问题显得很违和，我们需要再将文字进行一次位移，内部的文字我们尝试使用padding 进行位移。
成功，上面我们通过将padding-top和padding-bottom加入动画 只使用了一个标签做到了点击双层按压的效果，这种弹性效果可应用的场合还是比较多的。
实现的完整代码
结束语
在深入学习CSS之后，已经习惯于尽量减少HTML标签的使用，通过各种CSS的强大功能来完成样式。 不过在开发官方性质网站的时候为了兼容性还是得中规中矩的少用CSS3里的内容。 现在为了网站SEO优化也是放弃了使用一些动态生成DOM的框架进行开发， 老老实实的把DOM配合PHP写出来。