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