随着Web应用程序的日益普及，按钮成为Web UI设计中不可或缺的一部分。CSS3为设计师提供了丰富的按钮设计样式和功能，可以很容易地创建漂亮的、交互性强的按钮。

本文将介绍如何使用CSS3创建漂亮的按钮效果。

一、基本的CSS3按钮样式

在CSS3中，按钮样式的创建使用CSS3的box-shadow和border属性，同时为了实现更好的交互效果，可以结合CSS3的transition、transform属性和伪类选择器，例如:hover、:active和:focus来设置不同状态下的样式。下面是一个基本的CSS3按钮样式：

```css

button {

background: #2196F3;

border: none;

color: white;

padding: 16px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

transition-duration: 0.4s;

cursor: pointer;

border-radius: 20px;

}

button:hover {

background-color: #555555;

color: white;

box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);

}

button:active, button:focus {

background-color: #555555;

box-shadow: 0 5px #666;

transform: translateY(4px);

}

```

在这个CSS3样式中，我们设置了按钮的背景色、边框、颜色、内边距、居中显示、字体大小、外边距和圆角。

同时，我们使用了:hover伪类选择器来使按钮在鼠标悬停时改变颜色，并添加了阴影效果，使其更具有立体感。

我们还使用了:active和:focus伪类选择器来设置按钮按下或获取焦点时的效果。在这个样式中，我们使用了box-shadow、transform和transition属性来实现动态效果。

二、创建图标按钮

CSS3不仅可以创建漂亮的纯色按钮，我们还可以将按钮添加图标来增加交互性。我们可以使用Web上的矢量图标库，如Font Awesome和Material Icons，在按钮中添加图标。

```css

.button {

background-color: #2196F3;

border: none;

color: white;

padding: 16px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

transition-duration: 0.4s;

cursor: pointer;

border-radius: 20px;

}

.button:hover {

box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);

background-color: #555555;

color: white;

}

.button:active, .button:focus {

box-shadow: 0 5px #666;

background-color: #555555;

transform: translateY(4px);

}

.button .material-icons {

vertical-align: middle;

margin: 0 5px;

}

```

在按钮中添加图标的方法非常简单，我们只需要将图标作为按钮的子元素即可。在以上CSS3样式中，我们使用了Google Material Icons库来添加图标，图标位于按钮的中央。同时，我们使用了vertical-align和margin属性，使按钮和图标之间有适当的间距。

三、创建渐变按钮

多色渐变效果也可以应用于按钮的设计中。我们可以使用CSS3的渐变功能，根据需要设置不同的颜色、角度和方向来创建渐变效果。

```css

button {

background: #2196F3;

background-image: linear-gradient(to right, #2196F3, #FFC107);

border: none;

color: white;

padding: 16px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

transition-duration: 0.4s;

cursor: pointer;

border-radius: 20px;

}

button:hover {

background-image: linear-gradient(to right, #FFC107, #2196F3);

color: white;

}

button:active, button:focus {

background-color: #555555;

box-shadow: 0 5px #666;

transform: translateY(4px);

}

```

在这个CSS3样式中，我们使用了background-image属性和linear-gradient函数来创建渐变背景。我们设置了to right方向来表示渐变的方向，同时设置两种颜色：#2196F3和#FFC107。我们还必须使用background属性来设置默认的背景颜色，否则默认值将被用于background-image属性。

在按钮悬停时，我们使用了:hover伪类选择器来颠倒颜色方向以产生了更华丽的渐变效果。

四、创建3D按钮

除了基础按钮样式，我们还可以使用CSS3创建3D按钮效果，增加UI中的立体感。以下是一个3D按钮的CSS3样式：

```css

button {

background-color: #2196F3;

border: none;

color: white;

padding: 16px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

transition-duration: 0.4s;

cursor: pointer;

border-radius: 5px;

box-shadow:

inset 0 2px rgba(255, 255, 255, 0.3),

inset 0 -1px rgba(255, 255, 255, 0.3),

inset 1px 1px 0 rgba(255, 255, 255, 0.3),

inset -1px 2px 1px rgba(0, 0, 0, 0.2),

inset -2px 0 1px rgba(0, 0, 0, 0.2),

inset 0 -2px 1px rgba(0, 0, 0, 0.2),

2px 2px 2px rgba(0, 0, 0, 0.3);

}

button:hover {

box-shadow:

inset 0 3px rgba(255, 255, 255, 0.3),

inset 0 -1px rgba(255, 255, 255, 0.3),

inset 1px 1px 0 rgba(255, 255, 255, 0.3),

inset -1px 1px 1px rgba(0, 0, 0, 0.2),

inset -1px 2px 1px rgba(0, 0, 0, 0.2),

inset 0 -2px 1px rgba(0, 0, 0, 0.2),

2px 2px 3px rgba(0, 0, 0, 0.5);

transform: translateY(-2px);

}

button:active, button:focus {

box-shadow: inset 0 1px rgba(255, 255, 255, 0.4),

0 1px 1px rgba(255, 255, 255, 0.3),

0 -1px rgba(0, 0, 0, 0.2),

2px 2px 2px rgba(0, 0, 0, 0.4),

transform: translateY(2px);

outline: none !important;

}

```

在这个样式中，我们使用了box-shadow和inset属性来创建3D按钮的效果。我们增加了不同颜色和角度的阴影，产生了立体感。我们还使用了:hover和:active伪类选择器来改变按钮的状态。

五、创建圆形按钮

圆形的按钮在设计中不仅美观，而且可以相对其它形状的按钮更好地吸引用户的注意力。CSS3提供了多种方式用于创建圆形按钮，我们可以使用border-radius属性将矩形按钮变成圆形按钮。

```css

button {

background-color: #2196F3;

border: none;

color: white;

padding: 24px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 24px;

transition-duration: 0.4s;

cursor: pointer;

border-radius: 50%;

}

button:hover {

box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);

transform: translateY(-4px);

}

button:active, button:focus {

box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.4),

inset -1px -1px 2px rgba(0, 0, 0, 0.2),

2px 2px 5px rgba(0, 0, 0, 0.3),

transform: translateY(2px);

outline: none !important;

}

```

在这个样式中，我们设置了一个大的内边距（padding）来使圆形按钮更大，并将其border-radius属性设置为50%以实现圆形效果。我们还为:hover和:active伪类选择器添加了效果。

结语

在本文中，我们介绍了如何使用CSS3创建漂亮的按钮效果。无论是通过添加图标、渐变色、3D效果或圆形按钮，CSS3都提供了丰富的功能和样式，供Web设计师自由发挥创意和想象力。如果您还没有使用CSS3来创建按钮，那么开始吧！