如何制作扁平化按钮：纯css如何实现纯色切换按钮

我们在使用网页设计元素的时候，经常会用到按钮组件，尤其是在目前扁平化结构比较流行的设计风格下， 纯色背景按钮都将成为新宠，那么如何快速创建一个纯色背景的按钮呢？

首先，我们需要做一个标签就是span或者是div标签，为了写着简单方便，这里就以div标签为例，写一个按钮。先把代码清单写出来，然后给大家分享一些实际操作中的使用技巧。

代码清单：

<a href="https://www.jinshare.com/yyzq/">

<div style=" width:150px;margin-bottom:20px;text-align:center;background-color:#F30;border-radius: 10px;color:#fff;line-height:200%;">

业余时间如何赚钱

</div>

</a>

整体的效果如下：

当然，我们可以在使用过程中对代码进行一些交互设计。

按钮的高度和宽度可以根据实际需要来调整，还有按钮的背景演示可以在鼠标经过的时候来显示不同的演示。

使用a:hover:{background-color:(这里输入色值);}来控制一个按钮的交互效果，或者修改这个div的透明度来实现按钮的切换交互效果。

当然还有一点需要提到的是border-radius属性是css3中一个新增属性，在版本较低的ie浏览器中可能是不支持的，大家可以通过调整border-radius这个属性的值来控制按钮圆角的程度。