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

最新推荐文章于 2024-04-30 14:40:32 发布

小激动. Caim

最新推荐文章于 2024-04-30 14:40:32 发布

阅读量1k

点赞数 1

分类专栏：网站建设基础（html+div+css）文章标签： html5

本文链接：https://blog.csdn.net/dica54dica/article/details/130191810

版权

网站建设基础（html+div+css）专栏收录该内容

11 篇文章 4 订阅

订阅专栏

下面是一个使用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>

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;
}

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

效果如下：

时尚美观的渐变按钮

小激动. Caim

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML5+CSS3实现时尚美观的渐变按钮

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

扫一扫