用CSS制作凸出按钮效果

本文包含HTML效果，阅读原文以体验最佳效果：原文

按钮在各种软件的开发中几乎都是少不了的部分，好看的按钮有很多。今天我们来试着使用CSS制作简单的凸出按钮。

凸出按钮，顾名思义就是让用户觉得它是凸出于网页这个平面的，点击的时候会把它戳进去。 很多按钮都会有这样的效果，因为这的确是不错的用户体验。我们要做的是以CSS3为基础的简单凸出按钮。

文字凸出按钮

目标效果

L C G

核心知识点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中可以使用和文字完全相同的特性。

阿里巴巴适量字体图标库

块级凸出按钮

其实了解了文字凸出按钮的实现方法，块级凸出按钮的实现方法是一样的。 无非就是把文字的投影转移到了“块”上面。

目标效果

L C G

上面的内容就是将text-shadow换成box-shadow做成的。

叠加实验

依然是那句话，不把一个属性玩坏的前端工程师不是一个好绅士。我们来试试一些组合。

text-shadow+box-shadow

L C G

上面我们简单的将text-shadow和box-shadow组合在一起。 不过因为文字的位置问题显得很违和，我们需要再将文字进行一次位移，内部的文字我们尝试使用padding 进行位移。

L C G

成功，上面我们通过将padding-top和padding-bottom加入动画 只使用了一个标签做到了点击双层按压的效果，这种弹性效果可应用的场合还是比较多的。

实现的完整代码

结束语

在深入学习CSS之后，已经习惯于尽量减少HTML标签的使用，通过各种CSS的强大功能来完成样式。 不过在开发官方性质网站的时候为了兼容性还是得中规中矩的少用CSS3里的内容。 现在为了网站SEO优化也是放弃了使用一些动态生成DOM的框架进行开发， 老老实实的把DOM配合PHP写出来。

文章为原创内容并且是个人观点和见解，如有错误或问题欢迎指出
本文的地址为 : http://www.evillcg.com/blog/item/1467620744/