css3 按钮样式简单可扩展创建

本CSS教程将指导你如何创建简洁而可扩展的按钮，利用CSS3的先进特性，比如边界半径和线性渐变。让我们一步步开始这个精彩的旅程。

基础按钮样式: 我们创建一个基础的按钮类，它没有特定的颜色，这使得我们可以方便地应用不同的颜色。代码示例如下：

```css

.button {

font-family: sans-serif;

font-weight: bold;

color: fff;

padding: 5px 10px;

border-radius: 5px; / 这适用于包括Mozilla，WebKit和Internet Explorer在内的浏览器 /

cursor: pointer;

}

```

在这里，我们设置了按钮的基本样式和边界半径。如果你对边界半径属性有更多疑问，欢迎进一步了解。

添加不同的颜色: 现在我们已经有了圆角按钮的基础样式，我们可以使用不同的颜色来丰富我们的按钮。与其使用单一背景色，不如利用CSS3的线性渐变属性来创建更吸引人的按钮效果。例如：

```css

.blue {

background: 0085cc;

background-image: -moz-linear-gradient(top, 0085cc, 00717f); / 这适用于Mozilla浏览器 /

background-image: -webkit-gradient(linear, left top, left bottom, from(0085cc), to(00717f)); / 这适用于Webkit浏览器 /

}

```

在上述代码中，我们创建了一个带有渐变效果的按钮样式。对于不支持渐变属性的浏览器，我们还可以添加简单的背景颜色作为备选。如果你对线性渐变属性还不熟悉，请查阅相关资料进一步了解。

对于鼠标悬停在按钮上的效果，我们可以指定一个背景颜色变化，或者如果你喜欢，也可以创建类似的渐变悬停效果。例如：

```css

.blue:hover { background: 00717f; }

```

同样，你可以通过选择不同的颜色来创建其他颜色的按钮类。请参阅演示页面，那里有我用不同颜色创建的示例。

按钮大小: 我们还可以根据需求定义不同大小的按钮类。只需指定不同的字体大小即可。例如：

```css

.small { font-size: 12px; }

.medium { font-size: 18px; }

.large { font-size: 24px; }

```

那么如何使用这些按钮呢？非常简单！你可以像下面这样使用HTML来调用这些按钮：

```html

点击我!

点击我!

点击我!

```

至此，你已经学会了如何创建简单而灵活的按钮样式，通过利用CSS3的强大特性，你可以创建出无限可能的按钮效果。现在请尽情发挥你的创意吧！