6 minutes to achieve CSS flash reflection button

Not much, see the effect first:

Go back to your old business and continue to share simple and fun CSS creative effects, relax and relax ~

Implementation process (complete source code at the end) :

1 As usual, define basic styles:

* {margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'fangsong';
        }
        body{
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgb(0.0.0);
        }
Copy the code

font-family: ‘fangsong’; Song style. display: flex; align-items: center; justify-content: center; Flex layout to center buttons on the screen.

2. Define basic labels:

        <a href="#" class="item item1">
            aurora
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </a>
        <a href="#" class="item item2">
            aurora
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </a>
        <a href="#" class="item item3">
            aurora
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </a>
Copy the code

The three A tags correspond to the three buttons, and the four spans in each button are the four edges around the button. Each has a common selectors. Item and its own selectors.

3. Define the basic style of each button:

 .item{
            position: relative;
            margin: 50px;
            width: 300px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            text-transform: uppercase;
            text-decoration: none;
            font-size: 35px;
            letter-spacing: 5px;
            color: aqua;
            overflow: hidden;
            -webkit-box-reflect: below 1px linear-gradient( transparent,rgba(6.133.133.0.3));
        }
Copy the code

text-align: center; Text alignment. line-height: 80px; Word line height. text-transform: uppercase; Letters are uppercase. text-decoration: none; Remove the a label’s default underline. letter-spacing: 5px; The distance between each character. overflow: hidden; Overflow hidden. -webkit-box-Reflect: below 1px Linear-gradient (transparent,rgba(6, 133, 133,0.3)); This attribute gives a reflection effect.

4. Mouse over button style change:

 .item:hover{
            background-color: aqua;
            box-shadow:0 0 5px aqua,
            0 0 75px aqua,
            0 0 155px aqua;
            color: black;
        }
Copy the code

box-shadow:0 0 5px aqua, 0 0 75px aqua, 0 0 155px aqua; Shadow, write more lines can overlay more bright.

5. Set the style for the top one of the four lines surrounding the button:

.item span:nth-of-type(1) {position: absolute;
            left: -100%; 
            width: 100%;
            height: 3px;
            background-image: linear-gradient(to left,aqua ,transparent);
            animation: shang 1s linear infinite;
        }
        @keyframes shang{
            0%{
                left: -100%;
            }
            50%.100%{
                left:100%; }}Copy the code

position: absolute; left: -100%; Locate in the corresponding position. background-image: linear-gradient(to left,aqua ,transparent); Linear gradient color. animation: shang 1s linear infinite; Animation properties, make it move.

5. In the same way, set the other 3 styles for the surround button:

  .item span:nth-of-type(2) {position: absolute;
            top: -100%;
            right: 0;
            width: 3px;
            height: 100%;
            background-image: linear-gradient(to top,aqua ,transparent);
            animation: you 1s linear infinite;
            animation-delay: 0.25 s;
        }
        @keyframes you{
            0%{
                top: -100%;
            }
            50%.100%{
                top:100%; }}.item span:nth-of-type(3) {position: absolute;
            right: -100%;
            bottom: 0;
            width: 100%;
            height: 3px;
            background-image: linear-gradient(to right,aqua ,transparent);
            animation: xia 1s linear infinite;
            animation-delay: 0.5 s;
        }
        @keyframes xia{
            0%{
                right: -100%;
            }
            50%.100%{
                right:100%; }}.item span:nth-of-type(4) {position: absolute;
            bottom: -100%;
            left: 0;
            width: 3px;
            height: 100%;
            background-image: linear-gradient(to bottom,aqua ,transparent);
            animation: zuo 1s linear infinite;
            animation-delay: 0.75 s;
        }
        @keyframes zuo{
            0%{
                bottom: -100%;
            }
            50%.100%{
                bottom:100%; }}Copy the code

Animation – delay: 0.75 s; Animation delayed execution. Each line corresponds to a period of time delay, forming a time difference, forming a surround effect.

6. Set other colors for the first and third buttons:

 .item1{
            filter: hue-rotate(100deg);
        }
        .item3{
            filter: hue-rotate(250deg);
        }
Copy the code

filter: hue-rotate(100deg); Rotate with the hue, so that both the background and the shadow color change.

Complete code:

<! DOCTYPEhtml>
<html lang="zh-CN">
<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>* {margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'fangsong';
        }
        body{
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgb(0.0.0);
        }
        .item{
            position: relative;
            margin: 50px;
            width: 300px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            text-transform: uppercase;
            text-decoration: none;
            font-size: 35px;
            letter-spacing: 5px;
            color: aqua;
            overflow: hidden;
            -webkit-box-reflect: below 1px linear-gradient( transparent,rgba(6.133.133.0.3));
        }
        .item:hover{
            background-color: aqua;
            box-shadow:0 0 5px aqua,
            0 0 75px aqua,
            0 0 155px aqua;
            color: black;
        }
        .item span:nth-of-type(1) {position: absolute;
            left: -100%; 
            width: 100%;
            height: 3px;
            background-image: linear-gradient(to left,aqua ,transparent);
            animation: shang 1s linear infinite;
        }
        @keyframes shang{
            0%{
                left: -100%;
            }
            50%.100%{
                left:100%; }}.item span:nth-of-type(2) {position: absolute;
            top: -100%;
            right: 0;
            width: 3px;
            height: 100%;
            background-image: linear-gradient(to top,aqua ,transparent);
            animation: you 1s linear infinite;
            animation-delay: 0.25 s;
        }
        @keyframes you{
            0%{
                top: -100%;
            }
            50%.100%{
                top:100%; }}.item span:nth-of-type(3) {position: absolute;
            right: -100%;
            bottom: 0;
            width: 100%;
            height: 3px;
            background-image: linear-gradient(to right,aqua ,transparent);
            animation: xia 1s linear infinite;
            animation-delay: 0.5 s;
        }
        @keyframes xia{
            0%{
                right: -100%;
            }
            50%.100%{
                right:100%; }}.item span:nth-of-type(4) {position: absolute;
            bottom: -100%;
            left: 0;
            width: 3px;
            height: 100%;
            background-image: linear-gradient(to bottom,aqua ,transparent);
            animation: zuo 1s linear infinite;
            animation-delay: 0.75 s;
        }
        @keyframes zuo{
            0%{
                bottom: -100%;
            }
            50%.100%{
                bottom:100%; }}.item1{
            filter: hue-rotate(100deg);
        }
        .item3{
            filter: hue-rotate(250deg);
        }
    </style>
</head>
<body>
     
        <a href="#" class="item item1">
            aurora
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </a>
        <a href="#" class="item item2">
            aurora
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </a>
        <a href="#" class="item item3">
            aurora
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </a>
 
</body>
</html>
Copy the code

Conclusion:

Other articles: Text smoke effect HTML + CSS + JS Surround reflection loading effect HTML + CSS Bubble float background effect HTML + CSS Simple clock effects HTML + CSS + JS Cyberpunk style button HTML + CSS Copy netease cloud official website round cast figure HTML + CSS + JS Wave loading animation HTML + CSS Navigation bar scrolling gradient effect HTML + CSS + JS Page turning HTML + CSS 3D stereo photo album HTML + CSS Neon light painting board effect HTML + CSS + JS CSS attributes (1) Sass summary notes. , etc.See more on my homepage