Sample code for implementing neon button animation effects with CSS3.0

Sample code for implementing neon button animation effects with CSS3.0

Today I will share with you a neon button animation effect implemented with CSS 3.0. The effect is as follows:

The following is the code implementation, you are welcome to copy, paste and collect it.

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 3.0 to achieve neon button animation effects</title>
    <style>
        * {
            font-family: 'Microsoft YaHei', sans-serif;
            box-sizing: border-box;
        }
 
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background: #050801;
        }
 
        a {
            position: relative;
            display: inline-block;
            padding: 25px 30px;
            margin: 0 50px;
            color: #03e9f4;
            text-decoration: none;
            overflow: hidden;
            transition: 0.5;
            letter-spacing: 4px;
            -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
        }
 
        a:nth-child(1) {
            filter: hue-rotate(290deg);
        }
 
        a:nth-child(3) {
            filter: hue-rotate(110deg);
        }
 
        a:hover {
            background: #03e9f4;
            color: #050801;
            box-shadow: 0 0 5px #03e9f4,
                0 0 25px #03e9f4,
                0 0 50px #03e9f4,
                0 0 200px #03e9f4;
        }
 
        a span {
            position: absolute;
            display: block;
        }
 
        a span:nth-child(1) {
            top: 0;
            left: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #03e9f4);
            animation: animate1 1s linear infinite;
        }
 
        @keyframes animate1 {
            0% {
                left: -100%;
            }
 
            50%,
            100% {
                left: 100%;
            }
        }
 
        a span:nth-child(2) {
            top: 0;
            right: 0;
            height: 100%;
            width: 2px;
            background: linear-gradient(92deg, transparent, #03e9f4);
            animation: animate2 1s linear infinite;
            animation-delay: 0.25s;
        }
 
        @keyframes animate2 {
            0% {
                top: -100%;
            }
 
            50%,
            100% {
                top: 100%;
            }
        }
 
        a span:nth-child(3) {
            bottom: 0;
            right: -100%;
            height: 2px;
            width: 100%;
            background: linear-gradient(180deg, transparent, #03e9f4);
            animation: animate3 1s linear infinite;
            animation-delay: 0.5s;
        }
 
        @keyframes animate3 {
            0% {
                right: -100%;
            }
 
            50%,
            100% {
                right: 100%;
            }
        }
 
        a span:nth-child(4) {
            bottom: -100%;
            left: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(270deg, transparent, #03e9f4);
            animation: animate4 1s linear infinite;
            animation-delay: 0.75s;
        }
 
        @keyframes animate4 {
            0% {
                bottom: -100%;
            }
 
            50%,
            100% {
                bottom: 100%;
            }
        }
    </style>
</head>
 
<body>
    <a href="#">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        NENO BUTTON
    </a>
    <a href="#">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        NENO BUTTON
    </a>
    <a href="#">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        NENO BUTTON
    </a>
</body>
 
</html>

This concludes this article about the sample code for implementing neon button animation effects with CSS3.0. For more relevant CSS neon button content, please search 123WORDPRESS.COM’s previous articles or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<:  Example of JSON output in HTML format (test interface)

>>:  7 major elements of web page redesign Share the 7 major elements of web page redesign

Recommend

Vue realizes the percentage bar effect

This article shares the specific code of Vue to r...

Vue implements the question answering function

1. Request answer interface 2. Determine whether ...

MySQL 5.6.27 Installation Tutorial under Linux

This article shares the installation tutorial of ...

Solve the problem of ugly blue border after adding hyperlink to html image img

HTML img produces an ugly blue border after addin...

Detailed explanation of nginx installation, deployment and usage on Linux

Table of contents 1. Download 2. Deployment 3. Ng...

Two ways to clear float in HTML

1. Clear floating method 1 Set the height of the ...

HTML (css style specification) must read

CSS style specifications 1. Class Selector 2. Tag...

Four ways to combine CSS and HTML

(1) Each HTML tag has an attribute style, which c...

Example tutorial on using the sum function in MySQL

Introduction Today I will share the use of the su...

Simple example of adding and removing HTML nodes

Simple example of adding and removing HTML nodes ...

Methods and steps for deploying multiple war packages in Tomcat

1 Background JDK1.8-u181 and Tomcat8.5.53 were in...

GET POST Differences

1. Get is used to obtain data from the server, wh...

Tomcat common exceptions and solution code examples

The company project was developed in Java and the...