按钮 · Pink Cheetah

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

[hidecontent type="vip1"]

<button class="button">Click Me</button>

<style>
/* From Uiverse.io by SiddhantEngineer  - Tags: button */
.button {
  --button-accent: rgb(255, 0, 0);
  border: none;
  padding: 5px 20px;
  background: var(--button-accent);
  box-shadow: 0px 5px 0px 0px
      color-mix(in oklab, var(--button-accent) 80%, black),
    0px 5px 0px 5px black;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: 900;
  color: white;
  text-shadow: 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black;
  cursor: pointer;
  transition: all 0.1s ease-in-out;
}
.button:active {
  box-shadow: 0px 0px 0px 0px color-mix(in oklab, var(--button-accent), black),
    0px 0px 0px 5px black;
  transform: translateY(5px);
}

</style>
    

[/hidecontent]