Neon
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Neon HTML</title> | |
| </head> | |
| <body> | |
| <a href="#"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| Neon Button | |
| </a> | |
| <a href="#"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| Neon Button | |
| </a> | |
| <a href="#"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| Neon Button | |
| </a> | |
| </body> | |
| </html> | |
| <style type="text/css"> | |
| *{ | |
| margin: 0px; | |
| padding: 0px; | |
| font-family: sans-serif; | |
| box-sizing: border-box; | |
| } | |
| body{ | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| flex-direction: column; | |
| background-color: #050801; | |
| } | |
| a{ | |
| position: relative; | |
| display: inline-block; | |
| padding: 25px 30px; | |
| margin: 40px 0px; | |
| color: #03e9f4; | |
| font-size: 24px; | |
| text-decoration: none; | |
| overflow: hidden; | |
| text-transform: uppercase; | |
| 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-color: #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: 0px; | |
| 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: -100%; | |
| right: 0; | |
| width: 2px; | |
| height: 100%; | |
| background: linear-gradient(180deg,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%; | |
| width: 100%; | |
| height: 2px; | |
| background: linear-gradient(270deg,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%; | |
| right: 0%; | |
| width: 2px; | |
| height: 100%; | |
| background: linear-gradient(360deg,transparent,#03e9f4); | |
| animation: animate4 1s linear infinite; | |
| animation-delay: 0.75s; | |
| } | |
| @keyframes animate4{ | |
| 0%{ | |
| bottom: -100%; | |
| } | |
| 50%,100%{ | |
| bottom: 100%; | |
| } | |
| } | |
| </style> |
Comments
Post a Comment