Button by kleenpulse
#212121
1.btn { 2 --border-color: linear-gradient(-45deg, #ffae00, #7e03aa, #00fffb); 3 --border-width: 0.125em; 4 --curve-size: 0.5em; 5 --blur: 30px; 6 --bg: #080312; 7 --color: #afffff; 8 color: var(--color); 9 cursor: pointer; 10 /* use position: relative; so that BG is only for .btn */ 11 position: relative; 12 isolation: isolate; 13 display: inline-grid; 14 place-content: center; 15 padding: 0.5em 1.5em; 16 font-size: 17px; 17 border: 0; 18 text-transform: uppercase; 19 box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.6); 20 clip-path: polygon( 21 /* Top-left */ 0% var(--curve-size), 22 var(--curve-size) 0, 23 /* top-right */ 100% 0, 24 100% calc(100% - var(--curve-size)), 25 /* bottom-right 1 */ calc(100% - var(--curve-size)) 100%, 26 /* bottom-right 2 */ 0 100% 27 ); 28 transition: color 250ms; 29} 30 31.btn::after, 32.btn::before { 33 content: ""; 34 position: absolute; 35 inset: 0; 36} 37 38.btn::before { 39 background: var(--border-color); 40 background-size: 300% 300%; 41 animation: move-bg7234 5s ease infinite; 42 z-index: -2; 43} 44 45@keyframes move-bg7234 { 46 0% { 47 background-position: 31% 0%; 48 } 49 50 50% { 51 background-position: 70% 100%; 52 } 53 54 100% { 55 background-position: 31% 0%; 56 } 57} 58 59.btn::after { 60 background: var(--bg); 61 z-index: -1; 62 clip-path: polygon( 63 /* Top-left */ var(--border-width) 64 calc(var(--curve-size) + var(--border-width) * 0.5), 65 calc(var(--curve-size) + var(--border-width) * 0.5) var(--border-width), 66 /* top-right */ calc(100% - var(--border-width)) var(--border-width), 67 calc(100% - var(--border-width)) 68 calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)), 69 /* bottom-right 1 */ 70 calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)) 71 calc(100% - var(--border-width)), 72 /* bottom-right 2 */ var(--border-width) calc(100% - var(--border-width)) 73 ); 74 transition: clip-path 500ms; 75} 76 77.btn:where(:hover, :focus)::after { 78 clip-path: polygon( 79 /* Top-left */ calc(100% - var(--border-width)) 80 calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)), 81 calc(100% - var(--border-width)) var(--border-width), 82 /* top-right */ calc(100% - var(--border-width)) var(--border-width), 83 calc(100% - var(--border-width)) 84 calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)), 85 /* bottom-right 1 */ 86 calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)) 87 calc(100% - var(--border-width)), 88 /* bottom-right 2 */ 89 calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)) 90 calc(100% - var(--border-width)) 91 ); 92 transition: 200ms; 93} 94 95.btn:where(:hover, :focus) { 96 color: #fff; 97} 98
16K views
16K views
MIT License