按钮 · Light Owl

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

[hidecontent type="vip1"]

<button class="button">Click me !</button>

<style>
/* From Uiverse.io by SteveBloX  - Tags: white, black, button, shadow, modern, b&w */
.button {
  border-radius: 8px;
  height: 40px;
  border: none;
  background: #222;
  color: white;
  padding: 15px;
  box-shadow: 0 1px 1px -1px #00000026, 0 2px 1px -1px #00000025,
    0 3px 3px -2px #00000023, 0 7px 6px -2px #00000020,
    0 13px 13px -3px #0000001b, 0 30px 30px -4px #0000000d;
  font-weight: bold;
  font-family: Montserrat;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: 150ms ease-in-out;
}

.button:active {
  scale: 0.95;
  background: #fff;
  color: black;
  box-shadow: rgba(0, 0, 0, 0.26) 0px 1px 1px -1px,
    rgba(0, 0, 0, 0.24) 0px 2px 3px -2px, rgba(0, 0, 0, 0.19) 0px 5px 9px -3px,
    rgba(0, 0, 0, 0.03) 0px 16px 29px -4.5px;
}

</style>
    

[/hidecontent]