ایک بٹن کو بصری طور پر اسٹائل کریں اور اسے اپنی ویب سائٹ پر استعمال کرنے کے لیے HTML اور CSS حاصل کریں۔ ایک پری سیٹ سے شروع کریں، ٹائپوگرافی، رنگ، شکل، اور سائے کو ایڈجسٹ کریں، پھر ایکسپورٹ کرنے سے پہلے انٹرایکشن اسٹیٹس کا پیش نظارہ کریں۔
Everyday، Classic، Shaped، Expressive، Gradients، اور Elite کلیکشنز میں 44 پری سیٹس براؤز کریں۔ ہر پری سیٹ ایک شروعاتی نقطہ ہے جسے آپ ایڈٹ کر سکتے ہیں۔
پری سیٹس آپ کے ڈیزائن کو کیسے متاثر کرتے ہیں
پہلے منتخب کریں، پھر درست کریں
گیلری کو محدود کرنے کے لیے اسٹائل کلیکشن کا استعمال کریں۔ پری سیٹ لاگو کرنے سے ڈیفالٹ اور ہوور اسٹائل دونوں تبدیل ہو جاتے ہیں، جبکہ آپ کے بٹن کا ٹیکسٹ اور کلاس کا نام برقرار رہتا ہے۔
ایک سادہ سالڈ فل، ایک شکل والا کونا، ایک واضح آؤٹ لائن، یا زیادہ آرائشی ٹریٹمنٹ آزمائیں۔ ایک بار جب آپ کو سمت مل جائے، تو تفصیلات کو اپنے صفحے کے مطابق بنانے کے لیے دوسرے ٹیبز کا استعمال کریں۔
لیبل کو مناسب محسوس کروائیں
بٹن کا ٹیکسٹ، فونٹ فیملی، سائز، ویٹ، اسپیسنگ، لائن ہائٹ، الائنمنٹ، اور ٹیکسٹ کا رنگ سیٹ کریں۔ کام کے دوران لیبل کو اپ ڈیٹ ہوتے دیکھیں۔
ٹیکسٹ اور اسپیسنگ کو درست کریں
ٹائپوگرافی جو عمل کے مطابق ہو
ٹیکسٹ میں فونٹ کنٹرولز اور دوسرا بٹن ٹیکسٹ فیلڈ شامل ہے۔ فونٹ کا سائز 10 سے 80 px تک ہوتا ہے؛ درج شدہ فیملیز وزیٹر کے ڈیوائس پر دستیاب فونٹس کا استعمال کرتی ہیں۔
ایک مختصر لیبل استعمال کریں جو عمل کو بیان کرے۔ Fill میں، افقی اور عمودی پیڈنگ ٹائپ سائز کو تبدیل کیے بغیر اس کے ارد گرد جگہ کا اضافہ کرتی ہے۔ اس صفحے پر لمبے لیبلز کو چیک کریں جہاں بٹن استعمال کیا جائے گا۔
سالڈ یا گریڈینٹ فل کا انتخاب کریں
ایک پس منظر کا رنگ استعمال کریں یا لکیری گریڈینٹ کے ساتھ دو رنگوں کو ملائیں۔ کلر پکرز اور ہیکس ان پٹ آپ کو بصری یا درست طریقے سے کام کرنے دیتے ہیں۔
رنگ اور گریڈینٹ کی سمت سیٹ کریں
دو رنگ، ایک واضح سمت
Fill میں، Fill اسٹائل کو Linear gradient میں تبدیل کریں تاکہ Second color اور Gradient angle ظاہر ہو سکے۔ زاویہ 0 سے 360 ڈگری تک ہوتا ہے۔
ہیکس فیلڈز چھ ہندسوں کا مکمل رنگ یا تین ہندسوں کا شارٹ ہینڈ قبول کرتے ہیں۔ گریڈینٹ کے دونوں سروں کے خلاف سفید یا رنگین لیبل کی جانچ کریں؛ اسٹوڈیو خود بخود ٹیکسٹ کنٹراسٹ کی تصدیق نہیں کرتا ہے۔
آؤٹ لائن اور گہرائی کو کنٹرول کریں
منسلک یا آزاد کونوں، بارڈر کی چوڑائی اور اسٹائل، باکس شیڈوز، اور ٹیکسٹ شیڈوز کو ایڈجسٹ کریں۔ بٹن کو ایسی شکل دیں جو اس کے سیاق و سباق کے مطابق ہو۔
کونوں، بارڈرز، اور شیڈوز کو دریافت کریں
ایک واضح مستطیل سے ایک نرم گولی تک
Shape میں، ایک مشترکہ رداس کے لیے Link all corners کو آن رکھیں، یا ہر کونے کو سیٹ کرنے کے لیے اسے آف کریں۔ بارڈر اسٹائلز میں solid، dashed، dotted، double، inset، outset، ridge، groove، اور none شامل ہیں۔
Shadow میں، افقی اور عمودی آفسیٹس، بلر، رنگ، اور شفافیت سیٹ کریں۔ باکس شیڈو میں پھیلاؤ اور ایک انسیٹ سوئچ بھی ہوتا ہے۔ ٹیکسٹ شیڈو الگ ہے، لہذا آپ بٹن کی آؤٹ لائن کو تبدیل کیے بغیر لیبل میں گہرائی شامل کر سکتے ہیں۔
انٹرایکشن بھی ڈیزائن کریں
Default اور Hover اسٹائلز کو الگ الگ ایڈٹ کریں۔ Default، Hover، اور Active ظاہری شکلوں کا پیش نظارہ کریں، پھر ہلکے اور گہرے کینوس پر بٹن کا موازنہ کریں۔
ایڈیٹنگ اور پیش نظارہ کی حالتوں کو سمجھیں
دو قابل تدوین اسٹائلز، تین پیش نظارہ حالتیں
ایڈیٹنگ اسٹیٹ منتخب کرتی ہے کہ آپ کے کنٹرولز کس اسٹائل کو تبدیل کرتے ہیں۔ کینوس اسٹیٹ بٹن صرف پیش نظارہ کا انتخاب کرتے ہیں۔ پیش نظارہ پر ہوور کرنے یا دبانے سے اس کا انٹرایکشن بھی ظاہر ہوتا ہے۔
ہوور ویلیوز جو اب بھی ڈیفالٹ سے مماثل ہیں، کسٹمائز ہونے تک بنیادی ترامیم کی پیروی کرتی ہیں۔ ایکسپورٹ شدہ CSS میں ضرورت پڑنے پر ایک ہوور رول، ایک فوکس-وزیبل آؤٹ لائن، ایک ایکٹو موومنٹ، اور ایک ریڈیوسڈ-موشن رول شامل ہوتا ہے۔
CSS کو اپنے پروجیکٹ میں لائیں
تیار کردہ CSS اور مماثل HTML بٹن کاپی کریں، یا اسٹائل شیٹ ڈاؤن لوڈ کریں۔ ایک کلاس کا نام دونوں حصوں کو آپس میں جوڑے رکھتا ہے۔
کاپی کریں، ڈاؤن لوڈ کریں، اور اپنا کام محفوظ رکھیں
سادہ کوڈ جسے آپ براہ راست استعمال کر سکتے ہیں
ایک مخصوص کلاس کا نام منتخب کریں، اس کے ٹیب سے CSS کاپی کریں، پھر HTML سے بٹن کاپی کریں۔ ڈاؤن لوڈ کلاس کے نام پر ایک .css فائل محفوظ کرتا ہے؛ یہ مکمل ویب پیج ڈاؤن لوڈ نہیں کرتا ہے۔
پیش نظارہ اور کوڈ جنریشن آپ کے براؤزر میں چلتے ہیں۔ اسٹوڈیو اس براؤزر کے لوکل اسٹوریج میں ایک ڈرافٹ یاد رکھنے کی کوشش کرتا ہے؛ جو کچھ بھی آپ رکھنا چاہتے ہیں اسے ایکسپورٹ کریں۔ ری سیٹ اسٹوڈیو کو اس کی ابتدائی اسٹائل پر واپس لے جاتا ہے۔
ٹیکسٹ اور اسٹائلز اندر۔ HTML اور CSS باہر۔
کسی اپ لوڈ کی ضرورت نہیں ہے۔ JavaScript آپ کے براؤزر میں لائیو ایڈیٹر کو طاقت دیتا ہے۔ HTML اور CSS کو الگ الگ کاپی کریں، یا CSS اسٹائل شیٹ ڈاؤن لوڈ کریں۔ تیار کردہ فونٹ اسٹیک ناظرین کے ڈیوائس پر دستیاب فونٹس کا استعمال کرتا ہے۔
