按钮 · Strong Cheetah

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

[hidecontent type="vip1"]

<a class="space-button" href="#">
  <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2c-5.523 0-10 4.477-10 10s4.477 10 10 10 10-4.477 10-10-4.477-10-10-10zm0 18.5c-4.688 0-8.5-3.812-8.5-8.5s3.812-8.5 8.5-8.5 8.5 3.812 8.5 8.5-3.812 8.5-8.5 8.5zm1.5-10.5h-3v-4.5h-1v4.5h-3l4.5 5z" fill="currentColor"></path></svg>
  Explore Space
</a>

<style>
/* From Uiverse.io by irfnmdlptra - Tags: button */
.space-button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 1.2rem;
  text-transform: uppercase;
  color: #fff;
  background-color: #2d3142;
  border-radius: 5px;
  border: none;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
}

.space-button:hover {
  background-color: #454b5d;
  transform: translateY(-3px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.space-button:active {
  background-color: #1e222f;
  transform: translateY(-1px);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

.space-button svg {
  display: inline-block;
  margin-right: 10px;
  width: 20px;
  height: 20px;
  fill: #fff;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
  transform: translateZ(0);
  transition: all 0.3s ease;
}

.space-button:hover svg {
  transform: translateZ(10px) rotateY(180deg) rotateX(180deg);
}

.space-button:active svg {
  transform: translateZ(5px) rotateY(180deg) rotateX(180deg);
}

</style>

[/hidecontent]