Last active
December 21, 2025 14:08
-
-
Save c0dezer019/1a9c021d14e889cd672586857f3fd24c to your computer and use it in GitHub Desktop.
Conic Animation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| </head> | |
| <body> | |
| <button class="glow-button"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <line x1="12" y1="19" x2="12" y2="5"></line> | |
| <polyline points="5 12 12 5 19 12"></polyline> | |
| </svg> | |
| </button> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| background: #0d0d0d; /* Dark background like the video */ | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| margin: 0; | |
| } | |
| /* The Container/Button */ | |
| .glow-button { | |
| position: relative; | |
| width: 60px; | |
| height: 60px; | |
| background: #000; /* Inner button color */ | |
| border-radius: 50%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| cursor: pointer; | |
| border: none; | |
| outline: none; | |
| } | |
| /* The Icon */ | |
| .glow-button svg { | |
| color: #888; | |
| width: 24px; | |
| height: 24px; | |
| z-index: 2; /* Keeps icon on top */ | |
| transition: color 0.3s; | |
| } | |
| .glow-button:hover svg { | |
| color: #fff; | |
| } | |
| /* 1. The Spinning Gradient Border */ | |
| .glow-button::before { | |
| content: ''; | |
| position: absolute; | |
| /* Negative inset creates the border width */ | |
| top: -2px; left: -2px; right: -2px; bottom: -2px; | |
| border-radius: 50%; | |
| z-index: -1; /* Behind the button */ | |
| /* The Magic: A Conic Gradient to mimic the light reflection */ | |
| background: conic-gradient( | |
| from 0deg, | |
| transparent 0%, | |
| #333 10%, | |
| #00c3ff 40%, /* Blue tint */ | |
| #ffffff 50%, /* Bright white hotspot */ | |
| #ff00cc 60%, /* Purple/Pink tint */ | |
| #333 90%, | |
| transparent 100% | |
| ); | |
| /* The Animation */ | |
| animation: spin 2s linear infinite; | |
| } | |
| /* 2. Optional: The Outer Glow (Blur) */ | |
| .glow-button::after { | |
| content: ''; | |
| position: absolute; | |
| top: -2px; left: -2px; right: -2px; bottom: -2px; | |
| border-radius: 50%; | |
| z-index: -2; | |
| background: conic-gradient( | |
| from 0deg, | |
| transparent 0%, | |
| #00c3ff 40%, | |
| #ffffff 50%, | |
| #ff00cc 60%, | |
| transparent 100% | |
| ); | |
| filter: blur(10px); /* Softens the light spill */ | |
| opacity: 0.7; | |
| animation: spin 2s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment