CSS3怎么写横向渐变按钮随着CSS3的不断发展，我们现在可以轻松地用少许的代码就可以创建出各种漂亮的渐变按钮。在这篇文章中，我们将会学习怎样使用CSS3创建一个横向渐变按钮。第一步：创建HTML结构在开始样式编写之前，我们需要先编写一些HTML代码来创建我们的按钮。我们可使用一个简单的Step1：创建HTML结构

<button>ClickMe!</button>

第二步：添加基础样式一旦我们有了HTML结构，我们就能够添加基础样式，使按钮看上去更加美观。首先，我们需要设置按钮的边框和背景色彩，代码以下：

Step2：添加基础样式

button{border:none;padding:10px20px;background-color:4CAF50;color:fff;}

这将会在屏幕上显示一个绿色的按钮，其文本为白色。当我们将鼠标指针悬停在按钮上时，我们还希望按钮会变成更明亮的色彩。为了实现这一点，我们可以添加一个:hover伪类，代码以下：

Step2：添加基础样式

button{border:none;padding:10px20px;background-color:4CAF50;color:fff;}
button:hover{background-color:3E8E41;}

现在，当我们将鼠标指针悬停在按钮上时，按钮的背景色彩变成了深绿色。第三步：使用渐变色现在我们要使用CSS3的线性渐变功能来给按钮添加一些色彩渐变。为此，我们需要使用背景色彩属性，代码以下：

Step3：使用渐变色

button{border:none;padding:10px20px;background:linear-gradient(toright,4CAF50,8BC34A);color:fff;}
button:hover{background:linear-gradient(toright,3E8E41,689F38);}

这段代码将会让我们的绿色按钮显现出左到右逐步变化的色彩。这是怎么实现一个漂亮的横向渐变按钮所需的所有步骤。现在，我们已具有了一个漂亮的按钮，可以用在HTML网页中展现各种内容了。总结通过实现这个例子，我们可以看到CSS3的强大功能，能够让我们轻松地创建出各种漂亮的渐变按钮。但是，为了获得最好的渐变效果，我们要坚持基础原则，提高我们的CSS大师技能。

桂…哥…网…络www.gUIgeGe.cn