ابزار ساخت دکمه سایت

ابزار ساخت دکمه HTML و CSS برای سایت

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

اندازه دکمه
گردی گوشه ها

پیش نمایش زنده

<!-- HTML: این خط را در جای دکمه داخل صفحه قرار دهید -->
<a class="ir-cta-button" href="/contact">تماس با ما</a>

<!-- CSS: این بخش را داخل فایل CSS یا داخل تگ style قرار دهید -->
<style>
.ir-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 16px 30px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.32);
  background: linear-gradient(135deg, #0F766E 0%, #14B8A6 52%, #5EEAD4 100%);
  color: #FFFFFF;
  box-shadow: 0 18px 36px rgba(20, 184, 166, 0.28);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  letter-spacing: 0;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.ir-cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 48px rgba(20, 184, 166, 0.36);
  filter: saturate(1.08);
}

.ir-cta-button:active {
  transform: translateY(0);
}

.ir-cta-button:focus-visible {
  outline: 3px solid #14B8A6;
  outline-offset: 3px;
}
</style>

نمونه های آماده دکمه سایت

یکی از نمونه ها را انتخاب کن؛ همان استایل روی پیش نمایش و کد خروجی اعمال می شود.

راهنمای استفاده از کد دکمه

ابزار ساخت دکمه CSS برای سایت

اگر سایت یا قالب آماده داری، کد HTML را در جایی قرار بده که دکمه باید نمایش داده شود؛ مثلا داخل صفحه تماس، صفحه خدمات یا بخش CTA. کد CSS را هم داخل فایل CSS قالب، تنظیمات CSS سفارشی یا بین تگ style قرار بده.

اگر مطمئن نیستی HTML و CSS را جدا کجا بگذاری، گزینه «کپی کامل» را بردار. این خروجی هم HTML دکمه را دارد و هم CSS را داخل تگ style آماده کرده تا بتوانی یکجا تست کنی.

کپی HTMLکپی CSSکپی کامل