پیش‌نمایش زنده
کد 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: 9.9em;
 height: 3.7em;
}

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