css按钮

花裤衩x
85 阅读5分钟

1. 边框按钮：

效果图：

image.png

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #draw-border {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        button {
            border: 0;
            background: none;
            text-transform: uppercase;
            color: #4361ee;
            font-weight: bold;
            position: relative;
            outline: none;
            padding: 10px 20px;
            box-sizing: border-box;
        }

        button::before,
        button::after {
            box-sizing: inherit;
            position: absolute;
            content: '';
            border: 2px solid transparent;
            width: 0;
            height: 0;
        }

        button::after {
            bottom: 0;
            right: 0;
        }

        button::before {
            top: 0;
            left: 0;
        }

        button:hover::before,
        button:hover::after {
            width: 100%;
            height: 100%;
        }

        button:hover::before {
            border-top-color: #4361ee;
            border-right-color: #4361ee;
            transition: width 0.3s ease-out, height 0.3s ease-out 0.3s;
        }

        button:hover::after {
            border-bottom-color: #4361ee;
            border-left-color: #4361ee;
            transition: border-color 0s ease-out 0.6s, width 0.3s ease-out 0.6s, height 0.3s ease-out 1s;
        }
    </style>
</head>

<body>
    <div id="draw-border">
        <button>快来点击我哦</button>
    </div>
</body>

</html>

2. 冰冻按钮

效果图：

image.png

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #frozen-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        button {
            border: 0;
            margin: 20px;
            text-transform: uppercase;
            font-size: 20px;
            font-weight: bold;
            padding: 15px 50px;
            border-radius: 50px;
            color: white;
            outline: none;
            position: relative;
        }

        button:before {
            content: '';
            display: block;
            background: linear-gradient(to left, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.4) 50%);
            background-size: 210% 100%;
            background-position: right bottom;
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            border-radius: 50px;
            transition: all 1s;
            -webkit-transition: all 1s;
        }

        .green {
            background-image: linear-gradient(to right, #25aae1, #40e495);
            box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
        }

        .purple {
            background-image: linear-gradient(to right, #6253e1, #852D91);
            box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
        }

        .purple:hover:before {
            background-position: left bottom;
        }

        .green:hover:before {
            background-position: left bottom;
        }
    </style>
</head>

<body>
    <div id="frozen-btn">
        <button class="green">Hover me</button>
        <button class="purple">Hover me</button>
    </div>

</body>

</html>

3. 加载按钮

效果图：

image.png

image.png

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #loading-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        button {
            background: transparent;
            border: 0;
            border-radius: 0;
            text-transform: uppercase;
            font-weight: bold;
            font-size: 20px;
            padding: 15px 50px;
            position: relative;
        }

        button:before {
            transition: all 0.8s cubic-bezier(0.7, -0.5, 0.2, 2);
            content: '';
            width: 1%;
            height: 100%;
            background: #ff5964;
            position: absolute;
            top: 0;
            left: 0;
        }

        button span {
            mix-blend-mode: darken;
        }

        button:hover:before {
            background: #ff5964;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="loading-btn">
        <button><span>Hover me</span></button>
    </div>
</body>

</html>

4. 流光按钮

效果图： image.png

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: #000;
        }

        a {
            text-decoration: none;
            position: absolute;
            left: 50%;
            top: 50%;
            /* 居中 */
            transform: translate(-50%, -50%);
            font-size: 24px;
            background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
            background-size: 400%;
            width: 400px;
            height: 100px;
            color: #fff;
            line-height: 100px;
            text-align: center;
            text-transform: uppercase;
            border-radius: 50px;
            z-index: 1;
        }

        a::before {
            content: "";
            position: absolute;
            left: -5px;
            right: -5px;
            top: -5px;
            bottom: -5px;
            background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
            background-size: 400%;
            border-radius: 50px;
            filter: blur(20px);
            z-index: -1;
        }

        a:hover::before {
            animation: sun 8s infinite;
        }

        a:hover {
            animation: sun 8s infinite;
        }

        @keyframes sun {
            100% {
                background-position: -400% 0;
            }
        }
    </style>
</head>

<body>
    <a href="javascript:;">sunbutton</a>
</body>

</html>

5. 幂红灯光

效果图：

image.png

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #neon-btn {
            display: flex;
            align-items: center;
            justify-content: space-around;
            background: #031628;
            width: 50%;
            height: 500px;
        }

        .btn {
            border: 1px solid;
            background-color: transparent;
            text-transform: uppercase;
            font-size: 14px;
            padding: 10px 20px;
            font-weight: 300;
        }

        .one {
            color: #4cc9f0;
        }

        .two {
            color: #f038ff;
        }

        .three {
            color: #b9e769;
        }

        .btn:hover {
            color: white;
            border: 0;
        }

        .one:hover {
            background-color: #4cc9f0;
            -webkit-box-shadow: 10px 10px 99px 6px rgba(76, 201, 240, 1);
            -moz-box-shadow: 10px 10px 99px 6px rgba(76, 201, 240, 1);
            box-shadow: 10px 10px 99px 6px rgba(76, 201, 240, 1);
            transition: all ease-in 0.5s;
        }

        .two:hover {
            background-color: #f038ff;
            -webkit-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
            -moz-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
            box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
            transition: all ease-in 0.5s;
        }

        .three:hover {
            background-color: #b9e769;
            -webkit-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
            -moz-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
            box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
            transition: all ease-in 0.5s;
        }
    </style>
</head>

<body>
    <div id="neon-btn">
        <button class="btn one">Hover me</button>
        <button class="btn two">Hover me</button>
        <button class="btn three">Hover me</button>
    </div>
</body>

</html>

6.闪亮按钮

效果图：

image.png

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #shiny-shadow {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background: #1c2541;
        }

        button {
            border: 2px solid white;
            background: transparent;
            text-transform: uppercase;
            color: white;
            padding: 15px 50px;
            outline: none;
            overflow: hidden;
            position: relative;
        }

        span {
            z-index: 20;
        }

        button:after {
            content: '';
            display: block;
            position: absolute;
            top: -36px;
            left: -100px;
            background: white;
            width: 50px;
            height: 125px;
            opacity: 20%;
            transform: rotate(-45deg);
        }

        button:hover:after {
            left: 120%;
            transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
            -webkit-transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
        }
    </style>
</head>

<body>
    <div id="shiny-shadow">
        <button><span>Hover me</span></button>
    </div>
</body>

</html>

7. 萤火虫效果

效果图：

image.png

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <title>萤火虫动态按钮</title>
</head>
<style>
    @font-face {
        font-family: 'firefly';
        src: url(ZCOOLKuaiLe-Regular.ttf);
    }

    * {
        padding: 0;
        margin: 0;
    }

    body {
        height: 100vh;
        background: url(yh.bmp) no-repeat;
        background-size: cover;
    }

    ul {
        list-style: none;
    }

    button {
        outline: none;
        border: none;
    }

    .firefly {
        width: 180px;
        height: 60px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: linear-gradient(to right, #6EB46E 10%, #55B455);
        border-radius: 40px;
        opacity: .88;
        cursor: pointer;
        transition: 1s;
    }

    .firefly:hover {
        box-shadow: 0 0 10px #B4FFB4;
    }

    .firefly p {
        line-height: 60px;
        font-size: 22px;
        color: #F5DD8F;
        font-family: firefly;
        opacity: .88;
    }

    .lightning {
        width: 95%;
        height: 80%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 40px;
        transition: .8s;
        overflow: hidden;
    }

    .firefly:hover .lightning {
        box-shadow: 0 0 4px #B4FFB4 inset;
    }

    .lightning ul {
        opacity: 0;
        transition: .8s;
    }

    .firefly:hover ul {
        opacity: .8;
    }

    .lightning ul li {
        width: 5px;
        height: 5px;
        background-color: #91FA91;
        position: absolute;
        bottom: 10%;
        border-radius: 50%;
        opacity: .6;
        animation: fireflymove infinite linear;
    }

    @keyframes fireflymove {
        100% {
            bottom: 100%;
        }
    }
</style>

<body>
    <button class="firefly">
        <p>萤火虫</p>
        <div class="lightning">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </button>
</body>
<script>
    var lgh = $('.lightning li').length;
    console.log(lgh)

    $('.lightning li').each(function (i) {
        $(this).css({
            left: i * (100 / lgh) + '%',
            bottom: randomNum(-20, 10) + '%',
            animationDuration: randomNum(1, 5) + 's'
        });
    });

    function randomNum(max, min) {
        var num = Math.floor(Math.random() * (max - min + 1) + min);
        return num;
    }

</script>

</html>
avatar
文章
阅读
粉丝