按钮 · Hungry Husky

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

[hidecontent type="vip1"]

<button class="btn spacex-btn">
  <span>Launch Rocket</span>
  <div class="btn-bg"></div>
</button>

<style>
/* From Uiverse.io by Diox221 - Tags: button, animated */
.btn {
  position: relative;
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background-color: #333;
  cursor: pointer;
  overflow: hidden;
  z-index: 1;
}

.spacex-btn {
  background-color: #005288;
}

.btn-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  opacity: 0.3;
  z-index: -1;
  transition: transform 0.3s ease-in-out;
}

.spacex-btn:hover .btn-bg {
  transform: translate(-50%, -50%) scale(2);
}

</style>

[/hidecontent]