#212121
1button { 2 --glow-color: rgb(217, 176, 255); 3 --glow-spread-color: rgba(191, 123, 255, 0.781); 4 --enhanced-glow-color: rgb(231, 206, 255); 5 --btn-color: rgb(100, 61, 136); 6 border: .25em solid var(--glow-color); 7 padding: 1em 3em; 8 color: var(--glow-color); 9 font-size: 15px; 10 font-weight: bold; 11 background-color: var(--btn-color); 12 border-radius: 1em; 13 outline: none; 14 box-shadow: 0 0 1em .25em var(--glow-color), 15 0 0 4em 1em var(--glow-spread-color), 16 inset 0 0 .75em .25em var(--glow-color); 17 text-shadow: 0 0 .5em var(--glow-color); 18 position: relative; 19 transition: all 0.3s; 20} 21 22button::after { 23 pointer-events: none; 24 content: ""; 25 position: absolute; 26 top: 120%; 27 left: 0; 28 height: 100%; 29 width: 100%; 30 background-color: var(--glow-spread-color); 31 filter: blur(2em); 32 opacity: .7; 33 transform: perspective(1.5em) rotateX(35deg) scale(1, .6); 34} 35 36button:hover { 37 color: var(--btn-color); 38 background-color: var(--glow-color); 39 box-shadow: 0 0 1em .25em var(--glow-color), 40 0 0 4em 2em var(--glow-spread-color), 41 inset 0 0 .75em .25em var(--glow-color); 42} 43 44button:active { 45 box-shadow: 0 0 0.6em .25em var(--glow-color), 46 0 0 2.5em 2em var(--glow-spread-color), 47 inset 0 0 .5em .25em var(--glow-color); 48}
52K views
52K views
Comments
Variations
1 MIT License