This post is saved as a draft.
#212121
1button { 2 --b: 3px; 3 /* border thickness */ 4 --s: .45em; 5 /* size of the corner */ 6 --color: #e2e2e2; 7 font-weight: bold; 8 padding: calc(.5em + var(--s)) calc(.9em + var(--s)); 9 color: var(--color); 10 --_p: var(--s); 11 background: conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--color) 0) 12 var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p)); 13 transition: .3s linear, color 0s, background-color 0s; 14 outline: var(--b) solid #0000; 15 outline-offset: .6em; 16 font-size: 16px; 17 border: 0; 18 user-select: none; 19 -webkit-user-select: none; 20 touch-action: manipulation; 21} 22 23button:hover, 24button:focus-visible { 25 --_p: 0px; 26 outline-color: #ffffff; 27 outline-offset: .05em; 28} 29 30button:active { 31 background: #ffffff; 32 color: #000000; 33}
Variation of abutton
Variation of abutton