HTML 渐变椭圆按钮

最新推荐文章于 2024-03-10 19:11:56 发布

段旭文

最新推荐文章于 2024-03-10 19:11:56 发布

阅读量4.4k

点赞数 5

分类专栏： HTML 文章标签： html 渐变椭圆按钮 css js button

本文链接：https://blog.csdn.net/qq_33538554/article/details/87071096

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

效果截图：

Html页：

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>渐变椭圆按钮</title>
</head>
<body>
    <div class="btn">
        <input type="button" value="按钮" οnclick="butClick();" />
    </div>
</body>
</html>

css样式：

.btn {

width: 150px;
            height: 35px;
            display: inline-block;
            padding: 2px;
            border-radius: 35px;
            vertical-align: middle;
            background: #e3164e;
            background: linear-gradient(268deg,#e3164e,#7f1ba7,#841c39,#e993e7,#d27228);
            background-size: 1000% 1000%;
            -webkit-animation: gradient 10s ease infinite;
            -moz-animation: gradient 10s ease infinite;
            -o-animation: Agradient 10s ease infinite;
            animation: gradient 10s ease infinite;
        }

            .btn input {
                font: 300 14px/14px 'Source Sans Pro',sans-serif;
                letter-spacing: 1px;
                display: block;
                position: relative;
                width: 100%;
                height: 100%;
                text-transform: uppercase;
                background: #f6f6f6;
                border: none;
                outline: none;
                border-radius: 35px;
                color: #5a3db7;
                cursor: pointer;
                transition: all 0.3s cubic-bezier(0.645,0.045,0.355,1)
            }

            .btn:hover input {
                color: #fff;
                background: transparent;
            }

        @-webkit-keyframes gradient {
            0% {
                background-position: 0% 24%;
            }

            50% {
                background-position: 100% 77%;
            }

            100% {
                background-position: 0% 24%;
            }
        }

        @-moz-keyframes gradient {
            0% {
                background-position: 0% 24%;
            }

            50% {
                background-position: 100% 77%;
            }

            100% {
                background-position: 0% 24%;
            }
        }

        @-o-keyframes AnimationName {
            0% {
                background-position: 0% 24%;
            }

            50% {
                background-position: 100% 77%;
            }

            100% {
                background-position: 0% 24%;
            }
        }

        @keyframes gradient {
            0% {
                background-position: 0% 24%;
            }

            50% {
                background-position: 100% 77%;
            }

            100% {
                background-position: 0% 24%;
            }
        }
</style>

JS逻辑:
<script type="text/javascript">
        function butClick() {
            //按钮的点击事件
        }
</script>

段旭文

关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
HTML 渐变椭圆按钮

效果截图：Html页：&lt;html lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;渐变椭圆按钮&lt;/title&gt;&lt;/head&gt;&
复制链接

扫一扫

专栏目录