ساخت دکمه CSS

دکمه‌ی یک‌رنگ، خط‌دار، شبح یا گرادیانی با افکت hover دلخواه بسازید و کد HTML و CSS آن را کپی کنید.

متن دکمه

حالت

رنگ اصلی

رنگ متن

گردی گوشه: 10px

اندازه فونت: 15px

padding عمودی: 10px

padding افقی: 22px

سایه: 0px

افکت hover

کد CSS

.btn {
  background: #6366f1;
  color: #ffffff;
  border-radius: 10px;
  padding: 10px 22px;
  font-size: 15px;
  font-weight: 700;
  border: none;
  box-shadow: none;
  cursor: pointer;
  transition: all .2s ease;
}

.btn:hover {
  transform: scale(1.06);
}

کد HTML

<button class="btn">کلیک کنید</button>

ابزار ساخت دکمه CSS، دکمه‌های زیبا با افکت هاور می‌سازد و کد HTML و CSS آماده می‌دهد. دکمه‌ی حرفه‌ای بدون کدنویسی از صفر.

سبک دکمه (یک‌رنگ، خط‌دار، شبح یا گرادیانی)، رنگ، گردی گوشه و افکت هاور را تنظیم کنید تا پیش‌نمایش زنده ببینید و کد HTML و CSS را کپی کنید.

دکمه‌ی خوش‌ساخت با حالت هاور واضح، کاربر را به کلیک تشویق می‌کند و نرخ تبدیل را بهبود می‌دهد.

طراحان و توسعه‌دهندگان برای ساخت دکمه‌ی فراخوان (CTA) از این ابزار استفاده می‌کنند. برای افزودن انیمیشن به دکمه از ساخت انیمیشن CSS کمک بگیرید.

سوالات متداول

دکمه‌ی شبح یا ghost چیست؟

دکمه‌ی شبح دکمه‌ای است که پس‌زمینه ندارد و فقط با خط دور و متن دیده می‌شود و در حالت هاور پر می‌شود.

افکت هاور چرا مهم است؟

افکت هاور به کاربر بازخورد می‌دهد که عنصر قابل‌کلیک است و تجربه‌ی تعامل را واضح‌تر می‌کند.

کد دکمه را کجا بگذارم؟

کد HTML را در محل دکمه و کد CSS را در استایل صفحه قرار دهید.

ابزارهای مرتبط

ساخت گرادیان CSSگرادیان خطی یا شعاعی با چند رنگ بسازید و کد CSS آن را کپی کنید.

ساخت سایه CSSبا اسلایدر آفست، بلور، گسترش و رنگ، سایه‌ی دلخواه بسازید و کد CSS آن را کپی کنید.

ساخت افکت شیشه‌ای CSSافکت Glassmorphism (شیشه‌ای مات) با کنترل بلور، شفافیت و حاشیه بسازید.

انتخاب و تبدیل رنگیک ابزار کامل رنگ در چند بخش: انتخاب رنگ و گرفتن کد HEX/RGB/HSL/RGBA، تبدیل بین فرمت‌های رنگ (HEX، RGB، HSL، HSV، CMYK و نام CSS)، و برداشتن رنگ از روی هر پیکسل یک تصویر.

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

بررسی کنتراست رنگنسبت کنتراست دو رنگ را بر اساس استاندارد WCAG بسنجید و نتیجه‌ی AA/AAA را ببینید.