پیش‌نمایش زنده
کد HTML
<div class="btn-wrapper">
  <button class="btn"> button </button>
</div>
کد CSS
.btn-wrapper {
  width: 120px;
  height: 50px;
  position: relative;
  z-index: 1;
  background: linear-gradient(270deg, #96f061, #a259d3, #1d9de0, #e790b0);
  box-shadow: 2px 2px 10px rgba(255, 255, 255, 0.363);
  background-size: 800% 800%;
  animation: animateBorder 9s ease infinite;
}

.btn {
  width: 95%;
  height: 90%;
  position: absolute;
  padding: 5px;
  border: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #212121;
  z-index: 2;
  text-transform: uppercase;
  letter-spacing: 4.5px;
  color: white;
  font-weight: bold;
}

@keyframes animateBorder {
  0% {
    background-position: 0% 50%
  }

  50% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0% 50%
  }
}
نوع: button
تاریخ ایجاد: 2026/06/05
آخرین بروزرسانی: 2026/06/05