在现代Web设计中，按钮是不可或缺的元素之一，它们是页面中最重要的交互元素之一，由于CSS3的出现，现在创建漂亮的按钮变得非常容易。在本文中，我们将介绍如何使用CSS3为网页创建漂亮的按钮，让你的网页更加吸引人。

1.使用CSS3创建简单按钮

最简单，也是最常用的按钮就是单纯的链接，它就是一个有颜色，有文本并且带有光标指针的文本。我们来看一下通过 CSS3 创建一个简单的按钮是如何完成的。

首先，我们需要选择一个颜色。在这个例子里，我们使用了灰色。然后，我们给链接添加一些 CSS 样式：

```

a {

color: #fff;

padding: 10px 20px;

background: #444;

text-decoration: none;

border-radius: 20px;

}

```

现在我们已经创建了一个简单的按钮。我们添加了 padding（内边距），background（背景颜色），text-decoration（文本风格）以及 border-radius（边框圆角）。

2.创建圆形按钮

圆形按钮是很常见的按钮样式之一，它可以给网页添加一些灵气。要创建一个圆形按钮，我们需要添加一点额外的 CSS 样式：

```

a {

color: #fff;

padding: 10px 20px;

background: #444;

text-decoration: none;

border-radius: 50px;

width: 100px;

height: 100px;

text-align: center;

line-height: 100px;

font-size: 20px;

}

```

在这里，我们添加了 width（宽度）和 height（高度），并且它们的值相等，从而实现了一个圆形。

text-align 和 line-height 使链接居中，而 font-size（字体大小）和 padding 保证了文本和链接具有一定的大小。border-radius 的值为50%（或者更高），确保了边框圆角，从而实现了圆形。

3.创建三维按钮

三维按钮是非常吸引人的按钮之一。它们通过使用阴影，渐变和倾斜等效果来营造出立体的感觉。要创建三维按钮，我们需要添加一些额外的 CSS 样式：

```

a {

color: #fff;

padding: 10px 20px;

background: #444;

text-decoration: none;

border: 1px solid #000;

border-bottom: 4px solid #000;

box-shadow: 0 4px #000;

}

```

在这里，我们添加了一个 border（边框），并将其值设为1px，然后我们添加了一个 border-bottom（底部边框）并将其值设为4px，这样我们就有了一个实心和轮廓的按钮。

然后，我们添加一个 box-shadow（阴影）并将其值设为“0 4px #000”，这样就会为我们的按钮添加阴影。最后，我们为链接添加了一些边框圆角，从而使按钮看起来更加柔和。

4.创建带箭头的按钮

创建带有箭头的按钮可以使许多网站变得非常专业。这样的按钮经常用在购物车，下拉列表，向导和导航菜单中。

```

.button {

display: block;

width: 150px;

height: 50px;

line-height: 50px;

text-align: center;

font-size: 20px;

font-weight: 700;

text-transform: uppercase;

letter-spacing: 2px;

color: white;

background: #4CAF50;

position: relative;

padding-left: 32px;

margin: 20px auto;

cursor: pointer;

}

.button:before {

font-family: "FontAwesome";

content: "\f102";

position: absolute;

left: 8px;

top: 0;

bottom: 0;

margin: auto;

font-size: 20px;

background: white;

color: #4CAF50;

padding: 5px 9px;

border-radius: 3px;

}

```

在这个示例中，我们使用了 font-awesome 作为字体库。添加一个伪元素（`:before`），并在其中设置 FontAwesome 字符。通过设置 `position:absolute` 和一些属性，我们就可以实现一个箭头的效果。

5.创建渐变按钮

渐变可以使按钮看起来更美丽，用户会更加愿意点击它。要在按钮中使用渐变，我们需要添加一些 CSS 样式：

```

a {

color: #fff;

padding: 10px 20px;

background: #444;

text-decoration: none;

border-radius: 20px;

background: linear-gradient(#444, #222);

}

```

在这个示例中，我们添加了另外一行 CSS 样式：`background`。它通过 linear-gradient 函数创建了一个线性渐变。第一个参数是起始颜色，第二个参数是结束颜色。我们也可以选择方向，来控制渐变的方向。

结论

在这篇文章中，我们已经学习到了如何使用 CSS3 来创建漂亮的按钮。 我们介绍了一些基本按钮，包括圆形、三维和箭头等效果，并学习了渐变效果的使用。最终结果就是可以为你的网页增添一份视觉上的细节，更吸引用户的注意力。