按钮 · Clever Bullfrog

类型：组件　·　分类：按钮　·　收录：2026-09-19　·　源码：会员可见

[hidecontent type="vip1"]

<button>
  Button
</button>
<style>
/* From Uiverse.io by Shoh2008 - Tags: button */
button {
  --b: 3px;
   /* border thickness */
  --s: .45em;
 /* size of the corner */
  --color: #e2e2e2;
  font-weight: bold;
  padding: calc(.5em + var(--s)) calc(.9em + var(--s));
  color: var(--color);
  --_p: var(--s);
  background: conic-gradient(from 90deg at var(--b) var(--b),#0000 90deg,var(--color) 0)
    var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
  transition: .3s linear, color 0s, background-color 0s;
  outline: var(--b) solid #0000;
  outline-offset: .6em;
  font-size: 16px;
  border: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

button:hover,
button:focus-visible {
  --_p: 0px;
  outline-color: #ffffff;
  outline-offset: .05em;
}

button:active {
  background: #ffffff;
  color: #000000;
}
</style>

[/hidecontent]