按钮 · Nervous Insect

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

[hidecontent type="vip1"]

<div class="background-button">
  <button class="button">
    EMERGENCY
  </button>
</div>

<style>
/* From Uiverse.io by NguyenHaiNam24082000 - Tags: skeuomorphism, button, emergency */
.background-button {
  background: repeating-linear-gradient(
    45deg,
    #3c2209 0 20px,
    #ff9c00 20px 40px
  );
  width: 10em;
  height: 10em;
  -webkit-box-shadow: 15px 15px 50px 5px #5f5f5f;
  box-shadow: 15px 15px 50px 5px #5f5f5f;
  position: relative;
  display: inline-block;
  outline: 2px solid black;
}

.background-button::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 15%;
  left: 15%;
  width: 70%;
  height: 70%;
  background: #a0b8c4;
  border: 2px solid #3c2209;
}

.button {
  background: #cc2a1f;
  width: 65%;
  height: 65%;
  border-radius: 50%;
  position: absolute;
  top: 7.5%;
  left: 18.25%;
  color: white;
  font-size: 1em;
  font-weight: 900;
  font-family: 'Courier New', Courier, monospace;
  -webkit-box-shadow: 0 15px 0 0 #842a2a;
  box-shadow: 0 15px 0 0 #842a2a;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  border: 2px solid black;
}

.button:active {
  -webkit-box-shadow: 0 1px 1px 1px #8C0606;
  box-shadow: 0 1px 1px 1px #8C0606;
  top: 15%;
}

.background-button:has(.button:active) + .emergency {
  display: block;
  -webkit-transform: rotate(0deg) scaleY(1);
  -ms-transform: rotate(0deg) scaleY(1);
  transform: rotate(0deg) scaleY(1);
  -webkit-animation: anims 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
  animation: anims 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
}

@keyframes anims {
  0% {
    -webkit-transform: rotate(-30deg) scaleY(0.25);
    transform: rotate(-30deg) scaleY(0.25);
  }

  100% {
    -webkit-transform: rotate(0deg) scaleY(1);
    transform: rotate(0deg) scaleY(1);
  }
}

.emergency {
  position: absolute;
  display: none;
}

</style>

[/hidecontent]