یہ مثال صرف جنریٹر کے کنٹرولز کا استعمال کرتی ہے۔ اوپر دی گئی تصاویر عام HTML بٹنوں پر لاگو اصل ڈاؤن لوڈ کردہ اسٹائل شیٹس دکھاتی ہیں، نہ کہ ایڈیٹر کے اسکرین شاٹس۔
سگنیچر سے شروع کریں
CSS بٹن جنریٹر کھولیں۔ پری سیٹس میں، ایوری ڈے کلیکشن سے سگنیچر منتخب کریں۔ بٹن ٹیکسٹ کو "Get started" پر سیٹ کریں۔ کوڈ ایریا میں، کلاس کا نام cta-button سیٹ کریں۔
ایک پری سیٹ ڈیفالٹ اور ہوور اسٹائلز کو تبدیل کرتا ہے، جبکہ آپ کا لیبل اور کلاس کا نام برقرار رہتا ہے۔ تفصیلی ایڈجسٹمنٹ کرنے سے پہلے اپنا نقطہ آغاز منتخب کریں۔
کلاس کا نام CSS رولز کو آپ کے HTML بٹن سے جوڑتا ہے۔ جنریٹر غیر تعاون یافتہ حروف کو صاف کرتا ہے؛ غیر متعلقہ عناصر کی اسٹائلنگ سے بچنے کے لیے ایک مختصر، منفرد نام استعمال کریں۔
گریڈینٹ پل بنائیں
ایڈیٹنگ اسٹیٹ کو ڈیفالٹ پر رکھیں۔ ٹیکسٹ میں، سسٹم سینس، فونٹ سائز 18 px، اور ویٹ بولڈ منتخب کریں۔ سفید ٹیکسٹ کا رنگ، نارمل اسٹائل، سینٹرڈ الائنمنٹ، اور لائن ہائٹ 1.4 برقرار رکھیں۔
فل میں، لکیری گریڈینٹ منتخب کریں۔ نیچے دیے گئے دو رنگ اور زاویہ استعمال کریں۔ افقی پیڈنگ کو 32 px اور عمودی پیڈنگ کو 16 px پر سیٹ کریں۔ شکل میں، تمام کونوں کو لنک رکھیں اور کارنر ریڈیس کو 100 px پر سیٹ کریں۔ بارڈر کی چوڑائی 0 px رہے گی۔
شیڈو میں، باکس شیڈو کو فعال رکھیں۔ افقی آفسیٹ 0 px، عمودی آفسیٹ 8 px، بلر 24 px، اسپریڈ −4 px، رنگ #460BD8، اور اوپیسٹی 32% استعمال کریں۔ انسیٹ شیڈو اور ٹیکسٹ شیڈو کو آف رکھیں۔
پیڈنگ ٹیکسٹ کے ارد گرد کی جگہ کو تبدیل کرتی ہے۔ کارنر ریڈیس آؤٹ لائن کو تبدیل کرتا ہے۔ ایک بڑا ریڈیس لیبل کو چوڑا کیے بغیر یہ پل کی شکل بناتا ہے۔
ہوور کو اپنا الگ انداز دیں
ایڈیٹنگ اسٹیٹ کو ہوور پر سوئچ کریں۔ فل میں، بیک گراؤنڈ کا رنگ #33099E اور دوسرا رنگ #6D20BF میں تبدیل کریں۔ گریڈینٹ زاویہ کو 135° پر رکھیں۔ شیڈو میں، عمودی آفسیٹ کو 10 px اور بلر کو 28 px میں تبدیل کریں۔ دیگر ترتیبات کو تبدیل نہ کریں۔
ہر اسٹیٹ کا معائنہ کرنے کے لیے کینوس ڈیفالٹ، ہوور، اور ایکٹو بٹن استعمال کریں۔ آپ پریویو بٹن پر ہوور یا پریس بھی کر سکتے ہیں۔ اس کے کنارے اور شیڈو کا جائزہ لینے کے لیے کینوس کو لائٹ اور ڈارک کے درمیان تبدیل کریں۔
ایڈیٹنگ اسٹیٹ منتخب کرتی ہے کہ آپ کون سے اسٹائل تبدیل کرتے ہیں۔ کینوس اسٹیٹ صرف اس چیز کو تبدیل کرتی ہے جس کا آپ پریویو کرتے ہیں۔ آرام دہ ظاہری شکل کو ایڈجسٹ کرنے سے پہلے ڈیفالٹ ایڈیٹنگ پر واپس جائیں۔
ہوور پراپرٹیز جو اب بھی ڈیفالٹ سے مماثل ہیں، بعد میں ڈیفالٹ ایڈٹس کی پیروی کرتی ہیں۔ ایک بار جب آپ ہوور پراپرٹی کو کسٹمائز کر لیتے ہیں، تو یہ آزاد رہتی ہے۔ بیس اسٹائل تبدیل کرنے کے بعد دونوں اسٹیٹس کو دوبارہ چیک کریں۔
اپنے صفحے پر ایکسپورٹ اور ٹیسٹ کریں
CSS ٹیب منتخب کریں اور کاپی CSS استعمال کریں، یا cta-button.css کو محفوظ کرنے کے لیے ڈاؤن لوڈ منتخب کریں۔ HTML ٹیب منتخب کریں اور مماثل بٹن مارک اپ کاپی کریں۔ HTML میں وہی کلاس کا نام اور type="button" کے ساتھ ایک بٹن شامل ہے۔
CSS کو اپنی اسٹائل شیٹ میں شامل کریں، یا اپنے صفحے سے ڈاؤن لوڈ کردہ فائل کو لنک کریں۔ HTML کو وہاں رکھیں جہاں بٹن کی ضرورت ہے۔ دونوں ایکسپورٹ ایک ساتھ کام کرتے ہیں: ایک HTML بٹن اکیلے اپنی اسٹائلنگ شامل نہیں کرتا۔
صفحہ کھولیں اور اس کے ڈیفالٹ، ہوور، کی بورڈ فوکس، اور پریسڈ اسٹیٹس کو ٹیسٹ کریں۔ ایکسپورٹ میں فوکس-وزیبل آؤٹ لائن، ایک چھوٹی ایکٹو حرکت، اور ریڈیوسڈ-موشن رول شامل ہے۔ آپ کے ارد گرد کے اسٹائلز اور انسٹال کردہ فونٹس اب بھی نتیجے کو متاثر کر سکتے ہیں۔
جنریٹ کردہ بٹن ایک اسٹائلڈ کنٹرول ہے۔ اپنے پروجیکٹ میں اس کے کلک رویے کو جوڑیں؛ فارم میں شامل کرتے وقت درست بٹن ٹائپ استعمال کریں۔
cta-button.css
ڈاؤن لوڈ کردہ فائل کا نام کلاس کے نام کی پیروی کرتا ہے۔
عام سوالات
کیا مجھے CSS فریم ورک کی ضرورت ہے؟
نہیں۔ آؤٹ پٹ معیاری CSS جمع ایک سادہ HTML بٹن ہے۔ CSS کو اپنی اسٹائل شیٹ میں پیسٹ کریں اور بٹن پر مماثل کلاس استعمال کریں۔
کیا ڈاؤن لوڈ HTML کو بھی محفوظ کرتا ہے؟
ڈاؤن لوڈ کلاس کے نام پر رکھی گئی ایک .css فائل محفوظ کرتا ہے۔ بٹن مارک اپ کو HTML ٹیب سے الگ کاپی کریں۔
کیا میں ہر کونے کو مختلف ریڈیس دے سکتا ہوں؟
جی ہاں۔ شکل میں، تمام کونوں کو لنک کرنا بند کریں، پھر اوپر بائیں، اوپر دائیں، نیچے دائیں، اور نیچے بائیں کو آزادانہ طور پر سیٹ کریں۔ یہ مثال پل کی شکل کے لیے انہیں لنک رکھتی ہے۔
کیا میرا ڈیزائن اگلی بار بھی یہاں موجود ہوگا؟
اسٹوڈیو موجودہ ڈرافٹ کو اس براؤزر کی لوکل اسٹوریج میں محفوظ کرنے کی کوشش کرتا ہے۔ یہ کوئی اکاؤنٹ یا کراس ڈیوائس بیک اپ نہیں ہے۔ براؤزر کی ترتیبات، سائٹ کا ڈیٹا صاف کرنا، یا ری سیٹ کرنے سے یہ ہٹ یا تبدیل ہو سکتا ہے، لہذا جو کام آپ محفوظ رکھنا چاہتے ہیں اسے ایکسپورٹ کر لیں۔
کیا میرا بٹن کسی سرور پر اپ لوڈ ہوتا ہے؟
اسٹائلنگ کا پیش نظارہ اور CSS/HTML جنریشن آپ کے براؤزر میں چلتی ہے۔ ایڈیٹر ایکسپورٹ بنانے کے لیے آپ کے بٹن کے ٹیکسٹ یا اسٹائلنگ ڈرافٹ کو اپ لوڈ نہیں کرتا ہے۔
اپنے اگلے بٹن کو اپنا منفرد انداز دیں۔
ایک نقطہ آغاز منتخب کریں، تفصیلات کو ایڈجسٹ کریں، اور کوڈ کو اپنے پروجیکٹ میں لائیں۔