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}