代码直接奉上：
.gradient-button {
background: linear-gradient(45deg, #ff6b6b, #eec6ff); /* 渐变背景，从#ff6b6b到#eec6ff */
border: none; /* 移除边框 */
color: white; /* 文字颜色为白色 */
padding: 15px 30px; /* 内边距 */
text-align: center; /* 文字居中 */
text-decoration: none; /* 移除文字下划线 */
display: inline-block; /* 行内块元素 */
font-size: 16px; /* 字体大小 */
margin: 4px 2px; /* 外边距 */
cursor: pointer; /* 鼠标悬停时显示为指针 */
border-radius: 8px; /* 圆角边框 */
transition: background 0.3s ease; /* 背景渐变过渡效果 */
}
.gradient-button:hover {
background: linear-gradient(45deg, #eec6ff, #ff6b6b); /* 鼠标悬停时渐变背景反转 */
}你可以将这段代码添加到你的CSS文件中，并在HTML中使用 .gradient-button 类来应用这个样式。例如：
<button class="gradient-button">渐变按钮</button>这样，你就会得到一个带有渐变背景的按钮，当鼠标悬停在上面时，渐变方向会反转。你可以根据需要调整渐变色、文字颜色、内边距、字体大小等属性。
.png)
.jpeg)
.png)
.png)