CSS3的出现给我们的开发带来了很多方便，其中很重要的一点就是样式的制作，如今我们可以使用CSS3来制作非常炫酷的按钮，下面是一个CSS3按钮的图解：

.btn {background: linear-gradient(#ff5f6d, #ff0a87);border: none;border-radius: 50px;color: white;cursor: pointer;font-size: 1.2em;padding: 10px 25px;position: relative;text-transform: uppercase;}.btn:hover {box-shadow: 0px 1px 10px #ff5f6d;}.btn::before {content: "";position: absolute;background: linear-gradient(#ff5f6d, #ff0a87);border-radius: 50px;bottom: -5px;left: -2px;right: -2px;top: -2px;z-index: -1;}.btn:hover::before {box-shadow: 0px 1px 10px #ff5f6d;}

首先，在.btn类中我们定义了按钮的背景为线性渐变，从#ff5f6d到#ff0a87，同时不设定任何边框。让按钮具有圆角，字体颜色为白色，光标为手指形状，字体大小为1.2em，padding设置上下10像素，左右25像素，位置为相对，文本转换为大写。

接着，在.btn:hover类中我们设定当鼠标在按钮上移动时出现一个阴影效果。

最后，在.btn::before类中，我们绘制了一个和按钮尺寸大小相同的背景圆，使它的层级为-1，可以使它的位置在按钮的下层。当鼠标在按钮上移动时，它会出现一个和按钮相同的阴影效果，带来非常酷炫的效果。

上述方式只是基本的，如果您有更多的创意，欢迎参考CSS3按钮的其他方法。