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
This article shares the specific code of Vue to r...
The computer system has been reinstalled, and the...
1. Request answer interface 2. Determine whether ...
This article shares the installation tutorial of ...
Table of contents 1. Demand Background 2. Optimiz...
HTML img produces an ugly blue border after addin...
Table of contents 1. Download 2. Deployment 3. Ng...
1. Clear floating method 1 Set the height of the ...
CSS style specifications 1. Class Selector 2. Tag...
(1) Each HTML tag has an attribute style, which c...
Introduction Today I will share the use of the su...
Simple example of adding and removing HTML nodes ...
1 Background JDK1.8-u181 and Tomcat8.5.53 were in...
1. Get is used to obtain data from the server, wh...
The company project was developed in Java and the...