HTML5+CSS3实现时尚美观的渐变按钮

作者：凡人多烦事01 | 2024-03-23 19:17:45

踩

下面是一个使用CSS3制作时尚美观的渐变按钮的示例代码：

HTML部分：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>时尚美观的渐变按钮</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <button class="gradient-button">渐变按钮</button>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

CSS部分：

.container {
    text-align: center;
    margin-top: 10%;
}
.gradient-button {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 1.2em;
    font-weight: bold;
    color: #fff;
    background-image: linear-gradient(to right, #f44336, #ff9800, #ffeb3b, #4caf50);
    transition: background-position 0.3s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.gradient-button:hover {
    background-position: right center;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在上面的代码中，我们使用了CSS3的linear-gradient函数来定义渐变背景色，通过传递多个颜色值可以创建多色渐变。同时，我们使用了transition属性来实现鼠标悬浮时渐变背景色的过渡效果。最后，我们使用了box-shadow属性来添加阴影效果，使得按钮看起来更加立体。

效果如下：

时尚美观的渐变按钮

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/297102