پیش‌نمایش زنده
کد HTML
<button class="full-rounded">
<span>Hover me</span>
<div class="border full-rounded"></div></button>
کد CSS
button {
  font-size: 16px;
  position: relative;
  margin: auto;
  padding: 1em 2.5em 1em 2.5em;
  border: none;
  background: #fff;
  transition: all 0.1s linear;
  box-shadow: 0 0.4em 1em rgba(0, 0, 0, 0.1);
}

button:active {
  transform: scale(0.95);
}

button span {
  color: #464646;
}

button .border {
  position: absolute;
  border: 0.15em solid #fff;
  transition: all 0.3s 0.08s linear;
  top: 50%;
  left: 50%;
  width: 9em;
  height: 3em;
  transform: translate(-50%, -50%);
}

button:hover .border {
  display: block;
  width: 10.7em;
  height: 3.8em;
}

.full-rounded {
  border-radius: 2em;
}
نوع: button
تاریخ ایجاد: 2026/06/05
آخرین بروزرسانی: 2026/06/05