یک دکمه را به صورت بصری استایل‌دهی کنید و HTML و CSS را برای استفاده در وب‌سایت خود دریافت کنید. با یک پیش‌تنظیم شروع کنید، تایپوگرافی، رنگ‌ها، شکل و سایه‌ها را تنظیم کنید، سپس قبل از خروجی گرفتن، حالت‌های تعاملی را پیش‌نمایش کنید.
پیش‌تنظیم‌های 44 را در مجموعه‌های روزمره، کلاسیک، شکل‌دار، گویا، گرادینت و ویژه مرور کنید. هر پیش‌تنظیم یک نقطه شروع است که می‌توانید آن را ویرایش کنید.
پیش‌تنظیم‌ها چگونه بر طراحی شما تأثیر می‌گذارند
ابتدا انتخاب کنید، سپس دقیق تنظیم کنید
از مجموعه استایل برای محدود کردن گالری استفاده کنید. اعمال یک پیش‌تنظیم، استایل‌های پیش‌فرض و هاور را جایگزین می‌کند، در حالی که متن دکمه و نام کلاس شما حفظ می‌شود.
یک پر کردن ساده، گوشه شکل‌دار، خط دور واضح یا یک طرح تزئینی‌تر را امتحان کنید. هنگامی که جهت‌گیری خود را پیدا کردید، از تب‌های دیگر استفاده کنید تا جزئیات با صفحه شما هماهنگ شوند.
برچسب را مناسب کنید
متن دکمه، خانواده فونت، اندازه، وزن، فاصله‌گذاری، ارتفاع خط، تراز و رنگ متن را تنظیم کنید. همزمان با کار، به‌روزرسانی برچسب را مشاهده کنید.
متن و فاصله‌گذاری را دقیق تنظیم کنید
تایپوگرافی که با عمل مطابقت دارد
متن شامل کنترل‌های فونت و فیلد دوم متن دکمه است. اندازه فونت از 10 تا 80 پیکسل متغیر است؛ خانواده‌های ذکر شده از فونت‌های موجود در دستگاه بازدیدکننده استفاده می‌کنند.
از یک برچسب کوتاه استفاده کنید که عمل را توصیف کند. در بخش پر کردن (Fill)، فاصله‌گذاری افقی و عمودی بدون تغییر اندازه متن، فضا را در اطراف آن اضافه می‌کند. برچسب‌های طولانی‌تر را در صفحه‌ای که دکمه در آن استفاده می‌شود، بررسی کنید.
یک پر کردن ساده یا گرادینت انتخاب کنید
از یک رنگ پس‌زمینه یا ترکیب دو رنگ با گرادینت خطی استفاده کنید. انتخاب‌گرهای رنگ و ورودی‌های هگز به شما امکان می‌دهند به صورت بصری یا دقیق کار کنید.
رنگ‌ها و جهت گرادینت را تنظیم کنید
دو رنگ، یک جهت واضح
در بخش پر کردن، استایل پر کردن را به گرادینت خطی تغییر دهید تا رنگ دوم و زاویه گرادینت نمایان شود. زاویه از 0 تا 360 درجه متغیر است.
فیلدهای هگز یک رنگ شش رقمی کامل یا مخفف سه رقمی را می‌پذیرند. برچسب سفید یا رنگی را در برابر هر دو انتهای گرادینت تست کنید؛ استودیو به طور خودکار کنتراست متن را تأیید نمی‌کند.
خط دور و عمق را کنترل کنید
گوشه‌های متصل یا مستقل، عرض و استایل حاشیه، سایه‌های جعبه و سایه‌های متن را تنظیم کنید. به دکمه شکلی بدهید که با زمینه آن متناسب باشد.
گوشه‌ها، حاشیه‌ها و سایه‌ها را کاوش کنید
از یک مستطیل واضح تا یک قرص نرم
در بخش شکل، گزینه اتصال همه گوشه‌ها را برای یک شعاع مشترک روشن نگه دارید، یا آن را خاموش کنید تا هر گوشه را تنظیم کنید. استایل‌های حاشیه شامل توپر، خط‌چین، نقطه‌چین، دوبل، فرورفته، برجسته، لبه‌دار، شیاردار و بدون حاشیه است.
در بخش سایه، آفست‌های افقی و عمودی، تاری، رنگ و شفافیت را تنظیم کنید. سایه جعبه همچنین دارای گسترش و سوئیچ فرورفتگی است. سایه متن جداگانه است، بنابراین می‌توانید بدون تغییر خط دور دکمه، به برچسب عمق بدهید.
تعامل را نیز طراحی کنید
استایل‌های پیش‌فرض و هاور را جداگانه ویرایش کنید. ظاهر پیش‌فرض، هاور و فعال را پیش‌نمایش کنید، سپس دکمه را روی بوم‌های روشن و تیره مقایسه کنید.
ویرایش و حالت‌های پیش‌نمایش را درک کنید
دو استایل قابل ویرایش، سه حالت پیش‌نمایش
حالت ویرایش انتخاب می‌کند که کنترل‌های شما کدام استایل را تغییر دهند. دکمه‌های حالت بوم فقط پیش‌نمایش را انتخاب می‌کنند. هاور کردن یا فشار دادن پیش‌نمایش نیز تعامل آن را نشان می‌دهد.
مقادیر هاور که همچنان با پیش‌فرض مطابقت دارند، تا زمانی که سفارشی نشوند، از ویرایش‌های پایه پیروی می‌کنند. CSS خروجی گرفته شده در صورت نیاز شامل یک قانون هاور، یک خط دور فوکوس-مرئی، یک حرکت فعال و یک قانون کاهش حرکت است.
CSS را به پروژه خود بیاورید
CSS تولید شده و دکمه HTML منطبق را کپی کنید، یا یک فایل استایل‌شیت دانلود کنید. یک نام کلاس این دو قطعه را به هم متصل نگه می‌دارد.
کپی کنید، دانلود کنید و کار خود را حفظ کنید
کد ساده‌ای که می‌توانید مستقیماً استفاده کنید
یک نام کلاس متمایز انتخاب کنید، CSS را از تب آن کپی کنید، سپس دکمه را از HTML کپی کنید. دانلود یک فایل .css با نام کلاس ذخیره می‌کند؛ این یک صفحه وب کامل را دانلود نمی‌کند.
پیش‌نمایش و تولید کد در مرورگر شما اجرا می‌شود. استودیو سعی می‌کند یک پیش‌نویس را در حافظه محلی این مرورگر به خاطر بسپارد؛ هر چیزی را که می‌خواهید نگه دارید، خروجی بگیرید. بازنشانی، استودیو را به استایل اولیه خود بازمی‌گرداند.
متن و استایل‌ها وارد می‌شوند. HTML و CSS خارج می‌شوند.
نیازی به آپلود نیست. JavaScript ویرایشگر زنده را در مرورگر شما قدرت می‌بخشد. HTML و CSS را جداگانه کپی کنید، یا استایل‌شیت CSS را دانلود کنید. پشته فونت تولید شده از فونت‌های موجود در دستگاه بیننده استفاده می‌کند.
