پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<a href="#" class="radikalwp-cs-nav-chip">وردپرس<//a>
.radikalwp-cs-nav-chip {
  display: inline-block;
  padding: 6px 16px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: #0f766e;
  background: #fff;
  border: 1.5px solid #99f6e4;
  border-radius: 999px;
  text-decoration: none;
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .2s ease;
}
.radikalwp-cs-nav-chip:hover {
  color: #fff;
  background: #0d9488;
  border-color: #0d9488;
  transform: translateY(-1px);
}

درباره این اسنیپت

چیپ کوچک لینک‌دار با حاشیه فیروزه‌ای روشن و متن سبز دریایی که در هاور کاملاً پر می‌شود و کمی بالا می‌آید. برای ابر برچسب‌ها، فهرست تگ‌های مقاله و فیلترهای سریع ساخته شده است. اندازه جمع‌وجور آن اجازه می‌دهد ده‌ها چیپ در یک ردیف بنشینند بدون شلوغی. رنگ‌بندی ملایم آن با هر قالبی سازگار است.

پرسش‌های متداول

چیپ‌ها را داخل یک والد flex با ویژگی flex-wrap و gap قرار دهید تا در صفحه‌های باریک خودکار به ردیف بعدی بروند.

سه رنگ متن، حاشیه و حالت پر شده را با یک خانواده رنگی جایگزین کنید. برای چند دسته می‌توانید کلاس‌های رنگی جدا بسازید.

بله؛ عرض چیپ با متن رشد می‌کند. برای عبارت‌های بلندتر فقط padding افقی را کمی بیشتر کنید تا کپسول متعادل بماند.

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

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

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

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

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

کپچا

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

شاید بپسندی

پیش‌نمایش زنده اسنیپت

ردیف لینک‌های فوتر ستونی

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

مسیر راهنمای صفحات

ناوبری بردکرامب مسیر
۱۸
۴.۸ (۳)
پیش‌نمایش زنده اسنیپت

لینک ناو کپسولی

ناوبری لینک کپسولی
۱۵
۴.۶ (۳)