پیش‌نمایش زنده
کد HTML
<div class="button">
  <div class="big-circle">
    <div class="border-circle">
      <button class="real-button"></button>
    </div>
    <div class="shadow"></div>
  </div>
  <div class="width-border-circle"></div>
</div>
کد CSS
.button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.big-circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 0px solid;
  background: rgb(255, 255, 255);
  background: linear-gradient(
    0deg,
    rgb(182, 182, 182) 0%,
    rgba(0, 0, 0, 1) 100%
  );
  box-shadow: 0 2px 0 #cdd2da;
  cursor: pointer;
  transition: 50ms ease;
}

.border-circle {
  position: absolute;
  background: rgb(0, 0, 0);
  background: linear-gradient(
    90deg,
    rgb(150, 150, 150) 0%,
    rgb(0, 0, 0) 50%,
    rgba(150, 150, 150, 1) 100%
  );
  width: 70px;
  height: 70px;
  border-radius: 50%;
}

.shadow {
  position: absolute;
  background: radial-gradient(
    circle,
    rgb(0, 0, 0) 0%,
    rgb(99, 99, 99) 40%,
    rgba(0, 0, 0, 0) 70%,
    rgba(0, 0, 0, 0) 100%
  );
  width: 150px;
  height: 150px;
  border-radius: 50%;
  bottom: -80px;
  opacity: 0.2;
  transition: 100ms ease;
}

.real-button {
  border: none;
  position: absolute;
  background-color: rgb(143, 238, 0);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  cursor: pointer;
  transform: translateY(-8px);
  box-shadow: 0 9px 0 rgb(92, 165, 9);
  transition: 50ms ease;
}

.button:hover .real-button {
  box-shadow: 0 13px 0 rgb(92, 165, 9);
  translate: 0 -5px;
}

.button:active .real-button {
  background: rgba(184, 255, 74, 1);
  box-shadow: 0 0px 0 rgb(92, 165, 9);
  translate: 0 8px;
  filter: drop-shadow(0 0 5px rgba(184, 255, 74, 1));
}

.button:active .big-circle {
  background: rgb(255, 255, 255);
  background: linear-gradient(
    0deg,
    rgb(182, 182, 182) 0%,
    rgb(26, 26, 26) 100%
  );
  box-shadow: 0 2px 0 #cdd2da;
}

.button:active .shadow {
  opacity: 0;
}

.width-border-circle {
  position: absolute;
  width: 110px;
  height: 114px;
  border-radius: 50%;
  background: rgb(0, 0, 0);
  background: linear-gradient(
    90deg,
    rgb(49, 49, 49) 0%,
    rgb(150, 150, 150) 50%,
    rgb(49, 49, 49) 100%
  );
  z-index: -1;
  bottom: -10px;
}
نوع: button
تاریخ ایجاد: 2026/06/05
آخرین بروزرسانی: 2026/06/05