Use css to achieve cool effects on the login button (with code examples)-CSS Tutorial-php.cn

Use css to achieve cool effects on the login button (with code examples)

藏色散人

Release： 2023-04-05 16:16:38

forward

1916 people have browsed it

Today I saw a cool login button effect on the Internet; it felt awesome at first glance; but after putting it aside bit by bit, I found that it is not that difficult; I will post all the code ; If there is anything wrong, please tell me.

Analysis

Let’s put aside the before; in fact, the principle is to achieve the color gradient effect through the background size and matching position.

text-transform: uppercase; refers to converting letters to uppercase
Then set the background and background size
Change it when the mouse moves into (hover) the button Just position it

Effect 1:

Use css to achieve cool effects on the login button (with code examples)

This effect won’t be so cool, or flashy; I think if When writing some effects, this should be more suitable, and then just match the colors you need.

Copy the code to preview

<!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>

Copy after login

Effect 2:

##Note: filter: blur(20px ) is to set Gaussian blur

Copy the code to preview

<!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>

Copy after login

That’s all for today! You can copy the above code to show the effect.

After looking at all kinds of cool styles on the Internet, I found that I am really a novice; I hope that in the future, I will read more cool styles written on the Internet. If I see any interesting ones, I will send them to you when the time comes. Come here to record it; I hope you will learn more and more in the future!

Promote learning: "

css video tutorial"

The above is the detailed content of Use css to achieve cool effects on the login button (with code examples). For more information, please follow other related articles on the PHP Chinese website!