Button by SelfMadeSystem
This button was created for Button Mastery
#e8e8e8
1.button { 2 --br: 27px; 3 --w: 360px; 4 --h: 113px; 5 --bg-grad: radial-gradient(#fffd 10px, #0000 calc(var(--w) - 60px)), 6 linear-gradient( 7 70deg in lch, 8 #8e0dff, 9 #e39cf6 15%, 10 #fd9b9a 45%, 11 #ff7139 65%, 12 #fdbff1 85% 13 ); 14 15 position: relative; 16 cursor: pointer; 17 border-radius: var(--br); 18 isolation: isolate; 19 border: 0; 20 overflow: hidden; 21 width: var(--w); 22 height: var(--h); 23} 24 25.btn-bg { 26 position: absolute; 27 inset: 0; 28 z-index: -1; 29} 30 31:where(.btn-bg > div) { 32 position: absolute; 33 inset: 0; 34} 35 36.bg1 { 37 inset: -30px; 38 filter: url("#l-distort"); 39 background: var(--bg-grad); 40} 41 42.bg2 { 43 left: 0; 44 top: 0; 45 height: 100%; 46 aspect-ratio: 1.5; 47 background: radial-gradient(#fffd 10px, #0000 60px); 48 filter: url("#m-distort"); 49} 50 51.bg-cloud { 52 transform: translate(-50%); 53 aspect-ratio: 1.5; 54 background: radial-gradient(#fffd, #0000 70%); 55 filter: url("#m-distort"); 56} 57 58.bd-sat { 59 mask: linear-gradient(#fff, #fff0 40% 60%, #fff); 60} 61 62.bd-sat::after { 63 content: ""; 64 position: absolute; 65 inset: -30px; 66 border-radius: calc(var(--br) + 30px); 67 mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); 68 /* I forgor that I need the two mask composites because of firefoxxxxxx */ 69 mask-composite: exclude; 70 mask-composite: xor; 71 background: var(--bg-grad); 72 filter: url("#l-distort") saturate(3); 73 padding: calc(30px + 7px); 74} 75 76.bd1 { 77 transition: opacity 0.5s; 78 border-radius: calc(var(--br) - 18px); 79 inset: 6px; 80 box-shadow: inset -13px -13px 5px -10px #fffa; 81} 82 83.button:hover .bd1 { 84 opacity: 0; 85} 86 87.bd1h { 88 transition: opacity 0.5s; 89 border-radius: calc(var(--br) - 18px); 90 opacity: 0; 91 inset: 6px; 92 box-shadow: inset 13px 13px 5px -10px #fffa; 93} 94 95.button:hover:not(:active) .bd1h { 96 opacity: 1; 97} 98 99.bd3 { 100 inset: 20px; 101 border-radius: 17px; 102 border: 2px solid #fff8; 103 box-shadow: 0px 0px 6px 0px #fffa, inset -6px -6px 6px -6px #fffa, 104 inset 0px 6px 6px -6px #0004; 105 filter: blur(1px); 106} 107 108.bd3a { 109 inset: 42px; 110 right: 38px; 111 border-radius: 10px; 112 filter: blur(4px); 113 box-shadow: 0px 0px 20px 2px #0001, inset 0px 0px 3px 0px #fffa; 114} 115 116.bd4 { 117 transition: opacity 0.5s; 118 border-radius: calc(var(--br) - 5px); 119 box-shadow: inset 8px 8px 5px -5px #0005; 120} 121 122.button:hover .bd4 { 123 opacity: 0; 124} 125 126.bd4h { 127 transition: opacity 0.5s; 128 opacity: 0; 129 border-radius: calc(var(--br) - 5px); 130 box-shadow: inset -8px -8px 5px -5px #0005; 131} 132 133.button:hover:not(:active) .bd4h { 134 opacity: 1; 135} 136 137.bd4d { 138 transition: opacity 0.5s; 139 opacity: 0; 140 border-radius: var(--br); 141 box-shadow: inset 0px 0px 5px 3px #0005; 142} 143 144.button:active .bd4d { 145 opacity: 1; 146} 147 148.bd5 { 149 left: 26px; 150 top: 10px; 151 width: 60px; 152 height: 12px; 153 box-shadow: inset 5px -5px 5px -5px #fff; 154 background: linear-gradient(30deg, #fff, #fff0); 155 border-radius: 99px; 156 filter: blur(1.5px); 157} 158 159.bd6 { 160 left: 2px; 161 top: 26px; 162 width: 20px; 163 height: 60px; 164 rotate: 10deg; 165 box-shadow: inset 7px 7px 7px -7px #fff; 166 /* background: linear-gradient(150deg, #fff, #fff0); */ 167 border-radius: 99px; 168 filter: blur(1.5px); 169} 170 171.btn-txt { 172 display: flex; 173 align-items: center; 174 font-size: 20px; 175 width: fit-content; 176 margin: auto; 177} 178 179.btn-txt svg { 180 height: 25px; 181} 182
96 views
96 views
MIT License