首頁 > 文章 > web前端 > css實作登入按鈕酷炫效果（附程式碼實例）

css實作登入按鈕酷炫效果（附程式碼實例）

藏色散人轉載: 2023-04-05 16:16:381858瀏覽

今天在網路上看到一個酷炫的登入按鈕效果；初看時感覺好牛掰；但是一點一點的拋開以後發現，並沒有那麼難；我會將全部程式碼貼出來；如果有不對的地方，大家指點一哈。

分析

我們拋開before不談的話；其實原理和就是透過背景大小以及配合位置達到顏色漸變的效果。

text-transform: uppercase；是指將字母轉為大寫
然後設定背景和背景大小
當滑鼠移入（hover）按鈕時改變其定位即可

效果一：

css實作登入按鈕酷炫效果（附程式碼實例）

這種效果的話就不會那麼酷，或者說花俏的；我覺得如果在寫一些效果上，應該這種比較適合一些，然後配合自己需要的顏色即可。

複製程式碼可預覽

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 230px;
            height: 90px;
            line-height: 90px;
            text-align: center;
            color: #fff;
            font-size: 25px;
            text-transform: uppercase; 
            cursor: pointer;
            background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
            background-size: 400%;
            border-radius: 60px;
        }

        .btn:hover {
            animation: animate 8s linear infinite;
        }

        @keyframes animate {
            0% {
                background-position: 0%;
            }

            100% {
                background-position: 400%;
            }
        }
    </style>
</head>

<body>
    <b href="#">register</b>
</body>

</html>

效果二:

css實作登入按鈕酷炫效果（附程式碼實例）

注意：filter: blur(20px )是設定高斯模糊

複製一下程式碼即可預覽

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 230px;
            height: 90px;
            line-height: 90px;
            text-align: center;
            color: #fff;
            font-size: 25px;
            text-transform: uppercase; 
            cursor: pointer;
            background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
            background-size: 400%;
            border-radius: 60px;
        }

        .btn:hover {
            animation: animate 8s linear infinite;
        }

        @keyframes animate {
            0% {
                background-position: 0%;
            }

            100% {
                background-position: 400%;
            }
        }

        .btn::before {
            content: &#39;&#39;;
            position: absolute;
            top: -5px;
            left: -5px;
            right: -5px;
            bottom: -5px;
            z-index: -1;
            background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
            background-size: 400%;
            border-radius: 40px;
            opacity: 0;
            transition: 0.5s;
        }

        .btn:hover::before {
            filter: blur(20px);
            opacity: 1;
            animation: animate 8s linear infinite;
        }
    </style>
</head>

<body>
    <b href="#">register</b>
</body>

</html>

以上就是今天的全部內容了！大家可以複製以上程式碼，即可展現效果。

看了網路上的各種酷炫樣式以後，發現我真是一個小菜雞；希望在以後的日子裡；多看看網路上寫的酷炫樣式，如果看到有好玩的，到時候到這裡來記錄一下；希望以後會越學越多吧！

推進學習：《css影片教學》

以上是css實作登入按鈕酷炫效果（附程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文轉載於：juejin.im。如有侵權，請聯絡admin@php.cn刪除

上一篇：看看這些前端面試題，帶你搞定高頻知識點（五）下一篇：看看這些前端面試題，帶你搞定高頻知識點（五）

看更多