按钮 · Proud Mayfly

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

[hidecontent type="vip1"]

 <button class="button">
 <span class="span">click on me</span>
        <div class="button__bg button__bg-1"></div>
        <div class="button__bg button__bg-2"></div>
        <div class="button__bg button__bg-3"></div>
        <div class="button__bg button__bg-4"></div>
        <div class="button__bg button__bg-5"></div>
        <div class="button__bg button__bg-6"></div>
        <div class="button__bg button__bg-7"></div>
        <div class="button__bg button__bg-8"></div>
        <div class="button__bg button__bg-9"></div>
        <div class="button__bg button__bg-10"></div>
        <div class="button__bg button__bg-11"></div>
        <div class="button__bg button__bg-12"></div>
        <div class="button__bg button__bg-13"></div>
        <div class="button__bg button__bg-14"></div>
        <div class="button__bg button__bg-15"></div>
        <div class="button__bg button__bg-16"></div>
        <div class="button__bg button__bg-17"></div>
        <div class="button__bg button__bg-18"></div>
        <div class="button__bg button__bg-19"></div>
        <div class="button__bg button__bg-20"></div>
        <div class="button__bg button__bg-21"></div>
        <div class="button__bg button__bg-22"></div>
        <div class="button__bg button__bg-23"></div>
        <div class="button__bg button__bg-24"></div>
    </button>
<style>
/* From Uiverse.io by pamtbi - Tags: button, minecraft */
.button {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
  width: 70px;
  aspect-ratio: 3 / 2;
  border: none;
  border-radius: 0px;
  margin: 0 auto;
  padding: 0;
  box-shadow: 0px 5px 0px 0px rgb(102,102,102);
  transition: all .15s;
  position: relative;
  padding: 0
}

.button:hover {
  transform: translateY(-1px);
}

.button:active {
  box-shadow: none;
  transform: translateY(5px);
}

.button__bg {
  height: 100%;
  aspect-ratio: 1 / 1;
  align-self: stretch;
}

.button__bg-1, .button__bg-7, .button__bg-13, .button__bg-20, .button__bg-19, .button__bg-8, .button__bg-9, .button__bg-10, .button__bg-12 {
  background: #494949;
}

.button__bg-6, .button__bg-4, .button__bg-5, .button__bg-14, .button__bg-15, .button__bg-16, .button__bg-21 {
  background: #505050;
}

.button__bg-2, .button__bg-3, .button__bg-18, .button__bg-17 {
  background: #5a5a5a;
}

.button__bg-11, .button__bg-22 {
  background: #414141;
}

.button__bg-23, .button__bg-24 {
  background: #535353;
}

.span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  width: 100%;
  color: rgb(223, 217, 189);
  display: block;
  text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #49FF18, 0 0 40px #49FF18, 0 0 55px #49FF18, 0 0 75px #49ff18;
}

</style>

[/hidecontent]