پیش‌نمایش زنده
کد HTML
<div class="button-mario-kart-8">
  <p class="button-mario-kart-8-text">Start Grand Prix?</p>
  <button class="button-mario-kart-8-button">
    <div class="button-mario-kart-8-button-yellow">
      <p class="button-mario-kart-8-button-yellow-text">OK</p>
    </div>
    <div class="button-mario-kart-8-button-yellow-back"></div>
  </button>
  <div class="button-mario-kart-8-button-black"></div>
  <div class="button-mario-kart-8-corner1"></div>
  <div class="button-mario-kart-8-corner2"></div>
  <div class="button-mario-kart-8-corner3"></div>
  <div class="button-mario-kart-8-corner4"></div>
</div>
کد CSS
.button-mario-kart-8 {
  width: 25em;
  height: 15em;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: absolute;
  transform: scale(0.75);
}

.button-mario-kart-8-text {
  color: white;
  font-weight: bold;
  font-style: italic;
  display: flex;
  justify-content: center;
  font-size: 2em;
  font-family: Arial, sans-serif;
  text-shadow: 0.1em 0.1em rgb(0, 0, 0, 0.5);
  position: relative;
}

.button-mario-kart-8-button {
  cursor: pointer;
  width: 22.5em;
  height: 9em;
  position: relative;
  z-index: 3;
  clip-path: polygon(15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%);
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(#f4f2f0, #c4bfbb);
  border: 0.15em solid #f4f2f0;
  box-shadow: inset 0em 0.5em 1.5em white;
  transform: scale(1);
  transition: all 0.25s ease-in-out;
}

.button-mario-kart-8-button-yellow {
  width: 20em;
  height: 8em;
  position: relative;
  background: linear-gradient(#fff80d, #eeaf0c);
  z-index: 2;
  clip-path: polygon(15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%);
  box-shadow: inset 0em 0.5em 1.5em white;
  transform: translateX(0%);
}

.button-mario-kart-8-button-yellow-back {
  position: absolute;
  width: 20em;
  height: 8em;
  background-color: #fff80d;
  filter: blur(1em);
  transform: scale(0.85);
  transition: all 0.25s ease-in-out;
}

.button-mario-kart-8-button-yellow-text {
  font-size: 5em;
  font-weight: bold;
  font-style: italic;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  text-shadow: -0.025em 0em white;
  color: rgb(48, 48, 48);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

.button-mario-kart-8-button-black {
  width: 19em;
  height: 8em;
  position: absolute;
  background-color: rgba(48, 48, 48, 0.566);
  z-index: 2;
  clip-path: polygon(15% 0%, 85% 0%, 100% 50%, 85% 100%, 15% 100%, 0% 50%);
  bottom: 0.5em;
  border-radius: 0%;
  transition: all 0.25s ease-in-out;
  transform: scale(1);
}

.button-mario-kart-8-button:hover {
  transform: scale(1.05);
  transition: all 0.25s ease-in-out;
}

.button-mario-kart-8:hover .button-mario-kart-8-button-black {
  transition: all 0.25s ease-in-out;
  transform: scale(1.1);
}

.button-mario-kart-8-corner1,
.button-mario-kart-8-corner2,
.button-mario-kart-8-corner3,
.button-mario-kart-8-corner4 {
  width: 1.5em;
  height: 4em;
  background: linear-gradient(#eeaf0c, #fff80d);
  position: absolute;
  border-radius: 0.25em;
  z-index: 1;
  transition: all 0.25s ease-in-out;
  animation: box-shadow-yellow 1s linear infinite;
}

.button-mario-kart-8-corner1 {
  transform: rotate(0deg) skewX(-40deg);
  left: 2.5em;
  bottom: 6em;
}

.button-mario-kart-8-corner2 {
  transform: rotate(0deg) skewX(40deg);
  left: 2.5em;
  bottom: -0.5em;
}
.button-mario-kart-8-corner3 {
  transform: rotate(0deg) skewX(40deg);
  right: 2.5em;
  bottom: 6em;
}
.button-mario-kart-8-corner4 {
  transform: rotate(0deg) skewX(-40deg);
  right: 2.5em;
  bottom: -0.5em;
}

.button-mario-kart-8:hover .button-mario-kart-8-corner1,
.button-mario-kart-8:hover .button-mario-kart-8-corner2 {
  left: 1.5em;
}

.button-mario-kart-8:hover .button-mario-kart-8-corner3,
.button-mario-kart-8:hover .button-mario-kart-8-corner4 {
  right: 1.5em;
}

@keyframes box-shadow-yellow {
  0% {
    box-shadow: 0em 0em 0em 0em #fff80d55;
  }
  80% {
    box-shadow: 0em 0em 0em 0.25em #fff80d55;
  }
  100% {
    box-shadow: 0em 0em 0em 0.5em #fff80d00;
  }
}

.button-mario-kart-8-button-yellow:active {
  animation: button-yellow 0.25s;
}

.button-mario-kart-8-button-yellow:active
  ~ .button-mario-kart-8-button-yellow-back {
  transform: scale(1);
}

@keyframes button-yellow {
  0% {
    transform: translateX(0%);
    filter: blur(0em) brightness(100%);
  }
  33% {
    transform: translateX(-5%);
    filter: blur(0.25em) brightness(115%);
  }
  66% {
    transform: translateX(5%);
    filter: blur(0.25em) brightness(115%);
  }
  100% {
    transform: translateX(0%);
    filter: blur(0em) brightness(100%);
  }
}
نوع: button
تاریخ ایجاد: 2026/06/05
آخرین بروزرسانی: 2026/06/05