پیش‌نمایش زنده
کد HTML
<button class="morph-button"></button>
کد CSS
.morph-button {
  display: relative;
  background-color: #66DA43;
  color: #66DA43;
  width: 85px;
  height: 40px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.morph-button:hover {
  transform: scale(1.5);
}

.morph-button:active {
  transform: scale(0.8);
  background-color: #212121;
  border: 2px solid #66DA43;
}

.morph-button:before {
  content: "Twist";
  display: block;
  position: absolute;
  margin-top: -22px;
  margin-left: -2px;
  padding: 12px 25px;
  transform-origin: center;
  transition: transform 0.3s ease-in-out;
  z-index: 1;
  background-color: #212121;
  border: 2px solid #66DA43;
}

.morph-button:hover:before {
  transform: rotate(45deg) scale(1.2);
}
نوع: button
تاریخ ایجاد: 2026/06/05
آخرین بروزرسانی: 2026/06/05