پیشنمایش زنده (iframe sandbox)
تمامصفحه
<button class="radikalwp-btn-slide-i"><span class="radikalwp-btn-slide-ic">↓<//span>دانلود فایل<//button>
.radikalwp-btn-slide-i {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 9px 26px 9px 9px;
font-family: inherit;
font-size: 15px;
font-weight: 700;
color: #1e1b4b;
background: #eef2ff;
border: 1.5px solid #c7d2fe;
border-radius: 999px;
cursor: pointer;
transition: background .25s ease, border-color .25s ease;
}
.radikalwp-btn-slide-ic {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
font-size: 15px;
color: #fff;
background: #6366f1;
border-radius: 50%;
transition: transform .3s ease;
}
.radikalwp-btn-slide-i:hover {
background: #e0e7ff;
border-color: #a5b4fc;
}
.radikalwp-btn-slide-i:hover .radikalwp-btn-slide-ic { transform: translateY(3px); }
درباره این اسنیپت
دکمه کپسولی روشن با دایره آیکون که در هاور حرکت جهشی کوچک به پایین انجام میدهد و توجه را به سمت اقدام میکشاند. ترکیب پسزمینه بنفش کمرنگ و دایره پررنگ، تعادل رنگی خوشایندی میسازد. برای دکمه دانلود فایل، دریافت پیوست و اقدامهای ثانویه کاربرد دارد. آیکون داخل دایره قابل تعویض با هر نویسه یا ایموجی است.
پرسشهای متداول
نویسه داخل span آیکون را با ایموجی یا نویسه دلخواه جایگزین کنید. اندازه و رنگ دایره بهصورت خودکار حفظ میشود.
دکمه فوکوس طبیعی مرورگر را دارد. برای بهبود دسترسپذیری میتوانید یک استایل ساده :focus-visible هم به آن اضافه کنید.
مقدار gap در کلاس اصلی فاصله دو بخش را کنترل میکند. padding کل دکمه را هم میتوانید برای فضای بیشتر تغییر دهید.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۸ از ۳ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!