دکمه گرادیان CSS — بیش از ۱۰ نمونه آماده با کد کامل
دکمه گرادیان محبوب‌ترین المان CTA طراحی مدرن است. در این صفحه مجموعه کامل دکمه‌های گرادیان CSS را با پیش‌نمایش زنده جمع کرده‌ایم؛ روی هر نمونه ماوس ببرید تا افکت هاور را ببینید و با یک کلیک کد کامل (HTML + CSS) را کپی کنید.
همه کدها با پیشوند کلاس اختصاصی rwp- نوشته شده‌اند تا با استایل قالب شما (مخصوصاً المنتور و وردپرس) تداخل نکنند و مستقیم در ویجت HTML قابل استفاده باشند.
۹ کد آماده برای «دکمه گرادیان css»
جداکننده گرادیانی با دایره وسط
دکمه گرادیان بنفش
لودر حلقه کونیک بنفش
تولتیپ حاشیه گرادیانی
دکمه قاب گرادیانی
پیشنهاد ویژه
قاب گرادیانی این کارت با چرخش آرام رنگ‌ها، توجه کاربر را بدون شلوغی جلب میکند.
کارت قاب گرادیانی
رادیکال‌دبلیوپی
متن گرادیان متحرک
دکمه گرادیان غروب متحرک
لودر حلقه گرادیانی
سوالات متداول
چطور دکمه گرادیان CSS بسازم؟
با تابع linear-gradient در خاصیت background. مثال: background: linear-gradient(135deg, #7c3aed, #ec4899); سپس برای افکت هاور از background-size: 200% و تغییر background-position استفاده کنید. کدهای آماده همین صفحه را می‌توانید مستقیم کپی کنید.
دکمه گرادیان در المنتور چطور استفاده می‌شود؟
ویجت HTML را در صفحه بگذارید، کد HTML و تگ style مربوط به CSS را در همان ویجت قرار دهید و آپدیت کنید. نیازی به افزونه جانبی نیست.
آیا گرادیان CSS سرعت سایت را کم میکند؟
خیر؛ گرادیان CSS بهجای تصویر هیچ درخواست HTTP اضافی ندارد و سبکترین روش ساخت دکمه رنگی است.