|
.btn { |
|
&::before { |
|
content: ''; |
|
position: absolute; |
|
inset: 0; |
|
pointer-events: none; |
|
border-radius: inherit; |
|
background: linear-gradient(120deg, hsl(0 0% 100% / .6), hsl(0 0% 100% / 0) 10%, hsl(0 0% 100% / 0) 90%, hsl(0 0% 100% / 0.25)) border-box; |
|
border: 1px solid transparent; |
|
-webkit-mask: linear-gradient(black, black) padding-box, linear-gradient(black, black); |
|
mask: linear-gradient(black, black) padding-box, linear-gradient(black, black); |
|
-webkit-mask-composite: xor; |
|
mask-composite: exclude; |
|
} |
|
} |
|
|
|
.btn { |
|
position: relative; |
|
display: inline-flex; |
|
place-items: center; |
|
gap: 0.5rem; |
|
height: 34px; |
|
background: hsl(0 0% 15%); |
|
border-radius: 50em; |
|
padding-inline: 20px; |
|
white-space: nowrap; |
|
box-shadow: inset 0 0 0 1px hsl(0 0% 100% / .05), 0 0 0 1px hsl(0 0% 0% / 0.075), 0px 0.2px 0.3px -2px hsl(0 0% 0% / 0.06), 0px 0.7px 0.9px -2px hsl(0 0% 0% / 0.083), 0px 3px 4px -2px hsl(0 0% 0% / 0.14); |
|
-webkit-user-select: none; |
|
-moz-user-select: none; |
|
-ms-user-select: none; |
|
user-select: none; |
|
text-transform: capitalize; |
|
text-decoration: none; |
|
-webkit-appearance: none; |
|
-moz-appearance: none; |
|
appearance: none; |
|
transition: box-shadow .3s, background .3s; |
|
|
|
&::before { |
|
content: ''; |
|
position: absolute; |
|
inset: 0; |
|
pointer-events: none; |
|
border-radius: inherit; |
|
background: linear-gradient(120deg , hsl(0 0% 100% / .6), hsl(0 0% 100% / 0) 10%, hsl(0 0% 100% / 0) 90%, hsl(0 0% 100% / 0.25)) border-box; |
|
border: 1px solid transparent; |
|
-webkit-mask: linear-gradient(black, black) padding-box, linear-gradient(black, black); |
|
mask: linear-gradient(black, black) padding-box, linear-gradient(black, black); |
|
-webkit-mask-composite: xor; |
|
mask-composite: exclude; |
|
} |
|
|
|
@media (hover: hover) { |
|
&:hover { |
|
box-shadow: inset 0 0 0 1px hsl(0 0% 100% / .1), 0 0 0 1px hsl(0 0% 0% / 0.075), 0px 0.2px 0.3px -2px hsl(0 0% 0% / 0.06), 0px 0.7px 0.9px -2px hsl(0 0% 0% / 0.083), 0px 3px 4px -2px hsl(0 0% 0% / 0.14); |
|
background: hsl(0 0% 19%); |
|
} |
|
} |
|
|
|
&:active { |
|
translate: 0 1px; |
|
} |
|
} |
