按钮 · Chilly Goose

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

[hidecontent type="vip1"]

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

<style>
/* From Uiverse.io by kyle1dev  - Tags: button */
.elegant-button {
  background: linear-gradient(45deg, #00bfff, #1e90ff);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 16px;
  font-weight: bold;
  padding: 12px 24px;
  cursor: pointer;
  outline: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
.elegant-button:hover {
  background: linear-gradient(45deg, #1e90ff, #00bfff);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(-4px);
}
.elegant-button:active {
  background: linear-gradient(45deg, #00bfff, #1e90ff);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transform: translateY(0);
}

</style>
    

[/hidecontent]