این مثال فقط از کنترل‌های مولد استفاده می‌کند. تصاویر بالا شیت‌های استایل دانلود شده واقعی را نشان می‌دهند که روی دکمه‌های HTML معمولی اعمال شده‌اند، نه اسکرین‌شات‌های ویرایشگر.
شروع با Signature
مولد دکمه CSS را باز کنید. در بخش پیش‌تنظیم‌ها (Presets)، گزینه Signature را از مجموعه Everyday انتخاب کنید. متن دکمه را روی «Get started» تنظیم کنید. در ناحیه کد، نام کلاس را روی cta-button قرار دهید.
یک پیش‌تنظیم جایگزین استایل‌های پیش‌فرض و هاور می‌شود، در حالی که برچسب و نام کلاس شما باقی می‌ماند. قبل از انجام تنظیمات دقیق، نقطه شروع خود را انتخاب کنید.
نام کلاس، قوانین CSS را به دکمه HTML شما متصل می‌کند. مولد، کاراکترهای غیرپشتیبانی‌شده را پاک می‌کند؛ از یک نام کوتاه و متمایز استفاده کنید تا از استایل‌دهی به عناصر نامرتبط جلوگیری شود.
ایجاد دکمه قرصی گرادینت
حالت ویرایش (Editing) را روی Default نگه دارید. در بخش متن، System sans را انتخاب کنید، اندازه فونت 18 پیکسل و وزن Bold باشد. رنگ متن سفید، استایل معمولی، تراز وسط و ارتفاع خط 1.4 را حفظ کنید.
در بخش Fill، گزینه Linear gradient را انتخاب کنید. از دو رنگ و زاویه زیر استفاده کنید. فاصله افقی را روی 32 پیکسل و فاصله عمودی را روی 16 پیکسل تنظیم کنید. در بخش Shape، گزینه Link all corners را فعال نگه دارید و شعاع گوشه را روی 100 پیکسل تنظیم کنید. عرض حاشیه 0 پیکسل باقی می‌ماند.
در بخش Shadow، گزینه Box shadow را فعال نگه دارید. از افست افقی 0 پیکسل، افست عمودی 8 پیکسل، محو شدگی (Blur) 24 پیکسل، گسترش (Spread) −4 پیکسل، رنگ #460BD8 و شفافیت 32% استفاده کنید. سایه داخلی (Inset) و سایه متن را خاموش بگذارید.
فاصله‌گذاری (Padding) فضای اطراف متن را تغییر می‌دهد. شعاع گوشه، طرح کلی را تغییر می‌دهد. شعاع بزرگ این شکل قرصی را بدون عریض‌تر کردن برچسب ایجاد می‌کند.
به هاور رفتار خاص خود را بدهید
حالت ویرایش را به Hover تغییر دهید. در بخش Fill، رنگ پس‌زمینه را به #33099E و رنگ دوم را به #6D20BF تغییر دهید. زاویه گرادینت را روی 135 درجه نگه دارید. در بخش Shadow، افست عمودی را به 10 پیکسل و محو شدگی را به 28 پیکسل تغییر دهید. سایر تنظیمات را بدون تغییر بگذارید.
از دکمه‌های پیش‌فرض، هاور و فعال روی بوم برای بررسی هر حالت استفاده کنید. همچنین می‌توانید روی دکمه پیش‌نمایش هاور کنید یا آن را فشار دهید. بوم را بین حالت روشن و تاریک تغییر دهید تا لبه و سایه آن را بررسی کنید.
حالت ویرایش انتخاب می‌کند که کدام استایل‌ها را تغییر دهید. حالت بوم فقط چیزی را که پیش‌نمایش می‌کنید تغییر می‌دهد. قبل از تنظیم ظاهر اصلی، به ویرایش پیش‌فرض بازگردید.
ویژگی‌های هاور که همچنان با پیش‌فرض مطابقت دارند، از ویرایش‌های پیش‌فرض بعدی پیروی می‌کنند. هنگامی که یک ویژگی هاور را سفارشی می‌کنید، مستقل باقی می‌ماند. پس از تغییر استایل پایه، هر دو حالت را دوباره بررسی کنید.
خروجی گرفتن و تست در صفحه خود
زبانه CSS را انتخاب کنید و از Copy CSS استفاده کنید، یا Download را انتخاب کنید تا cta-button.css ذخیره شود. زبانه HTML را انتخاب کرده و نشانه‌گذاری دکمه منطبق را کپی کنید. HTML شامل همان نام کلاس و یک دکمه با type="button" است.
CSS را به شیت استایل خود اضافه کنید یا فایل دانلود شده را از صفحه خود لینک کنید. HTML را در جایی که دکمه قرار دارد بگذارید. این دو خروجی با هم کار می‌کنند: یک دکمه HTML به تنهایی شامل استایل‌دهی خود نیست.
صفحه را باز کنید و حالت‌های پیش‌فرض، هاور، فوکوس صفحه‌کلید و فشرده‌شده را تست کنید. خروجی شامل یک طرح کلی focus-visible، یک حرکت فعال کوچک و یک قانون کاهش حرکت است. استایل‌های اطراف و فونت‌های نصب‌شده شما همچنان می‌توانند بر نتیجه تأثیر بگذارند.
دکمه تولید شده یک کنترل استایل‌دهی شده است. رفتار کلیک آن را در پروژه خود متصل کنید؛ هنگام افزودن آن به فرم، از نوع دکمه صحیح استفاده کنید.
cta-button.css
نام فایل دانلود شده از نام کلاس پیروی می‌کند.
پرسش‌های متداول
آیا به یک چارچوب CSS نیاز دارم؟
خیر. خروجی یک CSS استاندارد به همراه یک دکمه HTML ساده است. CSS را در شیت استایل خود کپی کنید و از کلاس منطبق روی دکمه استفاده کنید.
آیا دانلود، HTML را هم ذخیره می‌کند؟
دانلود یک فایل .css با نام کلاس ذخیره می‌کند. نشانه‌گذاری دکمه را جداگانه از زبانه HTML کپی کنید.
آیا می‌توانم به هر گوشه شعاع متفاوتی بدهم؟
بله. در بخش Shape، گزینه Link all corners را خاموش کنید، سپس بالا چپ، بالا راست، پایین راست و پایین چپ را به‌طور مستقل تنظیم کنید. این مثال برای شکل قرصی، آن‌ها را متصل نگه می‌دارد.
آیا طرح من دفعه بعد هم اینجا خواهد بود؟
استودیو تلاش می‌کند پیش‌نویس فعلی را در حافظه محلی این مرورگر ذخیره کند. این یک حساب کاربری یا پشتیبان‌گیری بین دستگاهی نیست. تنظیمات مرورگر، پاک کردن داده‌های سایت یا بازنشانی (Reset) می‌تواند آن را حذف یا جایگزین کند، بنابراین کاری را که می‌خواهید نگه دارید، صادر (Export) کنید.
آیا دکمه من در سرور آپلود می‌شود؟
پیش‌نمایش استایل و تولید CSS/HTML در مرورگر شما اجرا می‌شود. ویرایشگر برای ایجاد خروجی، متن دکمه یا پیش‌نویس استایل شما را آپلود نمی‌کند.
به دکمه بعدی خود استایل خاص خود را بدهید.
یک نقطه شروع انتخاب کنید، جزئیات را تنظیم کنید و کد را به پروژه خود بیاورید.