This is the 18th day of my participation in Gwen Challenge

Writing in the front

If you want to love your own value, you have to create value for the world. — Goethe

rendering

Three beautiful examples

The HTML code

<div class="box">
        <button class="btn">button</button>
</div>
Copy the code

The implementation process

  1. Add a gradient background color to the button
  2. Enlarge the background to several times the original size, you can set this to make the gradient more obvious, and to achieve the streamer effect later
  3. Give the font a text-shadow property. Set more than one to increase brightness
  4. When the mouse passes, realize the streamer effect, through the animation to change the position of the background to achieve, equivalent to dragging the background, so that the button shows a different color
  5. When the mouse passes by, add the halo effect. Through the pseudo element, build a box bigger than the original button, hide it with the transparency of 0 at first, change the transparency to 1 when the mouse passes by, and set the filter attribute to add blur distance, so as to achieve the halo effect

CSS code

@keyframes move {
    0% {
        background-position: 0%;
    }
    100% {
        background-position: 100%; }}.btn {
    position: relative;
    width: 300px;
    height: 110px;
    color: white;
    line-height: 80px;
    font-size: 60px;
    font-family: sans-serif;
    text-transform: uppercase; // Convert to uppercasetext-align: center;
    border-radius: 40px;
    background: linear-gradient(90deg.rgb(242.97.94),rgb(234.150.104),rgb(251.200.2),rgb(174.9.43),rgb(108.40.243),rgb(212.4.128),rgb(85.132.206));
    background-size: 400%;
    border: none;
    outline: none;
    text-shadow: 0 0 3px white,
                 0 0 3px white,
                 0 0 3pxwhite; / / highlightz-index: 1;
}
.btn:hover {
    animation: move 2s linear alternate infinite;
}
.btn::before {
    content: ' ';
    position: absolute;
    top: -5px;
    left: -5px;
    width: 310px;
    height: 120px;
    background: linear-gradient(90deg.rgb(242.97.94),rgb(234.150.104),rgb(251.200.2),rgb(174.9.43),rgb(108.40.243),rgb(212.4.128),rgb(85.132.206));
    background-size: 400%;
    opacity: 0;
    border-radius: 45px;
    transition:.6s;
    z-index: -1;
}
.btn:hover::before {
    filter: blur(10px);
    opacity: 1;
    animation: move 2s linear alternate infinite;
}
Copy the code

The complete code

<! DOCTYPEhtml>
<html lang="en">
<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>Dazzle colour time</title>
    <style>
        @keyframes move {
            0% {
                background-position: 0%;
            }
            100% {
                background-position: 100%; * {}}margin: 0;
            padding: 0;
        }
        body {
            background-color: black;
        }
        .box {
            width: 400px;
            height: 400px;
            margin: 100px auto;
        }
        .btn {
            position: relative;
            width: 300px;
            height: 110px;
            color: white;
            line-height: 80px;
            font-size: 60px;
            font-family: sans-serif;
            text-transform: uppercase; // Convert to uppercasetext-align: center;
            border-radius: 40px;
            background: linear-gradient(90deg.rgb(242.97.94),rgb(234.150.104),rgb(251.200.2),rgb(174.9.43),rgb(108.40.243),rgb(212.4.128),rgb(85.132.206));
            background-size: 400%;
            border: none;
            outline: none;
            text-shadow: 0 0 3px white,
                         0 0 3px white,
                         0 0 3px white;
            z-index: 1;
        }
        .btn:hover {
            animation: move 2s linear alternate infinite;
        }
        .btn::before {
            content: ' ';
            position: absolute;
            top: -5px;
            left: -5px;
            width: 310px;
            height: 120px;
            background: linear-gradient(90deg.rgb(242.97.94),rgb(234.150.104),rgb(251.200.2),rgb(174.9.43),rgb(108.40.243),rgb(212.4.128),rgb(85.132.206));
            background-size: 400%;
            opacity: 0;
            border-radius: 45px;
            transition:.6s;
            z-index: -1;
        }
        .btn:hover::before {
            filter: blur(10px);
            opacity: 1;
            animation: move 2s linear alternate infinite;
        }
    </style>
</head>
<body>
    <div class="box">
        <button class="btn">button</button>
    </div>
</body>
</html>
Copy the code

End

The above is all the content of the dazzling streamer button

Believe in yourself first, and then others will believe you. — Romain Rolland