Button by ahmedgamal-hub
#212121
1.glow-on-hover { 2 width: 220px; 3 height: 50px; 4 border: none; 5 outline: none; 6 color: #fff; 7 background: #111; 8 cursor: pointer; 9 position: relative; 10 z-index: 0; 11 border-radius: 10px; 12} 13 14.glow-on-hover:before { 15 content: ''; 16 background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000); 17 position: absolute; 18 top: -2px; 19 left: -2px; 20 background-size: 400%; 21 z-index: -1; 22 filter: blur(5px); 23 width: calc(100% + 4px); 24 height: calc(100% + 4px); 25 animation: glowing 20s linear infinite; 26 opacity: 0; 27 transition: opacity .3s ease-in-out; 28 border-radius: 10px; 29} 30 31.glow-on-hover:active { 32 color: #000 33} 34 35.glow-on-hover:active:after { 36 background: transparent; 37} 38 39.glow-on-hover:hover:before { 40 opacity: 1; 41} 42 43.glow-on-hover:after { 44 z-index: -1; 45 content: ''; 46 position: absolute; 47 width: 100%; 48 height: 100%; 49 background: #111; 50 left: 0; 51 top: 0; 52 border-radius: 10px; 53} 54 55@keyframes glowing { 56 0% { 57 background-position: 0 0; 58 } 59 60 50% { 61 background-position: 400% 0; 62 } 63 64 100% { 65 background-position: 0 0; 66 } 67} 68
974 views
974 views
Variations
1 MIT License