پیش‌نمایش زنده (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 کل دکمه را هم می‌توانید برای فضای بیشتر تغییر دهید.

امتیاز شما به این محتوا

میانگین امتیاز کاربران: ۴.۸ از ۳ رأی — برای امتیازدهی وارد شوید

دیدگاه‌ها (۰)

هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!

دیدگاه خود را بنویسید

کپچا

دیدگاه شما پس از تأیید مدیر نمایش داده می‌شود.

شاید بپسندی

دکمه با آیکون تلگرام

دکمه تلگرام آیکون
۵۲
۴.۲ (۸)
پیش‌نمایش زنده اسنیپت

دکمه آیکون سرخورنده

دکمه آیکون فلش
۵۲
۴.۲ (۸)
پیش‌نمایش زنده اسنیپت

دکمه چرخش آیکون ستاره

دکمه ستاره آیکون
۴۵
۴.۷ (۷)