利用div+css3实现一个背景渐变的button按钮的示例代码

下面是利用div+css3实现一个背景渐变的button按钮的完整攻略。

1. 编写HTML代码
   首先，我们需要在HTML文件中编写一个button标签，并将其包裹在一个div中，例如

<div class="btn-wrap">
  <button class="btn">按钮</button>
</div>

1. 为button样式设置基本样式
   接下来，我们可以为button样式设置基本样式，例如背景颜色、字体大小、边框等。这里我们以设置背景颜色为例：

.btn {
  background-color: #6bb9f0;
  color: #fff;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
}

1. 为div样式设置背景渐变
   接着，我们可以为div样式设置背景渐变。这里我们使用CSS3的渐变属性来实现，例如设置从左到右的背景渐变：

.btn-wrap {
  background: linear-gradient(to right, #6bb9f0, #8f62b3);
}

1. 添加过渡效果
   最后，为了让渐变效果更加平滑，我们可以添加过渡效果。这里我们使用CSS3的过渡属性来实现，例如添加背景颜色过渡效果：

.btn-wrap {
  background: linear-gradient(to right, #6bb9f0, #8f62b3);
  transition-property: background-color;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}

.btn-wrap:hover {
  background-color: #8f62b3;
}

通过hover伪类，我们可以在鼠标悬停时，将背景色过渡到新的颜色。

示例1：实现从上到下的背景渐变
如果希望实现从上到下的渐变效果，只需要将代码中的to right改为to bottom即可。

.btn-wrap {
  background: linear-gradient(to bottom, #6bb9f0, #8f62b3);
}

示例2：实现圆角矩形的按钮
如果希望实现一个圆角矩形的按钮，只需要将代码中的border-radius值调大即可。

.btn {
  border-radius: 20px;
}

以上就是利用div+css3实现一个背景渐变的button按钮的完整攻略，希望可以帮助到你。