非常好看的前端按钮带动画 (CSS)

xlj
2021-01-18
/
0 评论
/
162 阅读
/
正在检测是否收录...
01/18

写了一个非常好看的CSS效果按钮,带动画

效果图

源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按钮美化</title>

    <!-- 初始化 -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,body {
            height: 100%;
        }

        body {
            font-size: 18px;
            padding: 1em;
        }

        span.ButtonStyleBlue {
            color: #000000;
            border: 2px solid #18dcff;
            display: inline-block;
            padding: 5px 10px;
            border-radius: 4px;
            box-shadow: 2px 2px 2px #16c8e7;
            margin: 4px 4px;
            cursor: pointer;
            user-select: none;
        }

        span.ButtonStyleBlue:hover {
            animation: 0.5s buttonStyleBlue;
            animation-fill-mode: forwards;
        }

        span.ButtonStyleRed {
            color: #000000;
            border: 2px solid #d30707;
            display: inline-block;
            padding: 5px 10px;
            border-radius: 4px;
            box-shadow: 2px 2px 2px #b40707;
            margin: 4px 4px;
            cursor: pointer;
            user-select: none;
        }

        span.ButtonStyleRed:hover {
            animation: 0.5s buttonStyleRed;
            animation-fill-mode: forwards;
        }

        span.ButtonStyleYellow {
            color: #000000;
            border: 2px solid #f0ec1a;
            display: inline-block;
            padding: 5px 10px;
            border-radius: 4px;
            box-shadow: 2px 2px 2px #d1ce18;
            margin: 4px 4px;
            cursor: pointer;
            user-select: none;
        }

        span.ButtonStyleYellow:hover {
            animation: 0.5s buttonStyleYellow;
            animation-fill-mode: forwards;
        }

        span.ButtonStyleGreen {
            color: #000000;
            border: 2px solid #75fc1b;
            display: inline-block;
            padding: 5px 10px;
            border-radius: 4px;
            box-shadow: 2px 2px 2px #67db19;
            margin: 4px 4px;
            cursor: pointer;
            user-select: none;
        }

        span.ButtonStyleGreen:hover {
            animation: 0.5s buttonStyleGreen;
            animation-fill-mode: forwards;
        }

        @keyframes buttonStyleBlue {
            0% {
                
            }

            100% {
                background-color: #18dcff;
                color: #ffffff;
            }
        }

        @keyframes buttonStyleRed {
            0% {

            }
            
            100% {
                background-color: #d30707;
                color: #ffffff;
            }
        }

        @keyframes buttonStyleYellow {
            0% {

            }

            100% {
                background-color: #f0ec1a;
                color: #ffffff;
            }
        }

        @keyframes buttonStyleGreen {
            0% {

            }

            100% {
                background-color: #75fc1b;
                color: #ffffff;
            }
        }
    </style>
</head>
<body>
    <span class="ButtonStyleBlue">Button</span>
    <span class="ButtonStyleRed">Button</span>
    <span class="ButtonStyleYellow">Button</span>
    <span class="ButtonStyleGreen">Button</span>

</body>
</html>
版权属于:

XLJ - 代码记录

本文链接:

https://xlj0.com/index.php/archives/18/(转载时请注明本文出处及文章链接)

评论 (0)