Creating a beautiful button with a one sided triangle using CSS and HTML-In Urdu
ہیلو ڈیویلپرز! میں ایک پروجیکٹ پر کام کر رہا تھا جس میں مجھے ایک بٹن کے ساتھ ایک طرفہ تکون شامل کرنی تھی، اور میں نے سی ایس ایس کا استعمال کرتے ہوئے تلاش کیا لیکن کوئی اچھے نتائج نہیں ملے جو اس کی وضاحت کریں۔ تو میں نے سوچا کہ اس کے بارے میں خود لکھوں!
آپ کے لینڈنگ پیج کے لیے سی ٹی اے بٹن بہت اہم ہے۔ کال ٹو ایکشن (سی ٹی اے) بٹن ویب ڈیزائن میں ایک اہم عنصر ہے جو صارف کی مشغولیت اور تبدیلی کی شرحوں پر نمایاں اثر ڈال سکتا ہے۔ ایک دلکش اور پرکشش سی ٹی اے بٹن آپ کی ویب سائٹ کے وزیٹرز کی توجہ حاصل کر سکتا ہے اور انہیں کسی خاص کارروائی کرنے کی ترغیب دے سکتا ہے، جیسے کہ خریداری کرنا یا فارم مکمل کرنا۔ اس بلاگ پوسٹ میں، ہم آپ کو دکھائیں گے کہ سی ایس ایس کا استعمال کرتے ہوئے ایک سجیلا اور انٹرایکٹو سی ٹی اے بٹن کیسے بنایا جا سکتا ہے جس کے ساتھ ایک طرفہ تکون ہو
ایک طرفہ تکون والے بٹن کے لیے ایچ ٹی ایم ایل
تو آئیے ایک طرفہ تکون والے بٹن کے لیے ایچ ٹی ایم ایل سے شروع کرتے ہیں
<div class=”cta-container”>
<button class=”cta-button”>Call to Action</button>
</div>
یہ ایچ ٹی ایم ایل کوڈ ایک کنٹینر عنصر شامل کرتا ہے جس کی کلاس “سی ٹی اے کنٹینر” ہے اور ایک بٹن عنصر جس کی کلاس “سی ٹی اے بٹن” ہے، صفحے میں شامل کرتا ہے۔ بٹن عنصر میں “کال ٹو ایکشن” کی عبارت شامل ہے، جسے آپ اپنی مرضی کے مطابق تبدیل کر سکتے ہیں۔
پیش نظارہ
یہ ایچ ٹی ایم ایل کوڈ کچھ اس طرح دکھائی دے گا
ایک طرفہ تکون والے بٹن کے لیے سی ایس ایس
.cta-container {
position: relative;
display: inline-block;
}.cta-container:before {
content: “”;
position: absolute;
top: 50%;
right: -14px;
transform: translateY(-50%) rotate(45deg);
border-top: 28px solid #6747C7;
border-right: 28px solid #6747C7;
width: 0;
height: 0;
}.cta-button {
width: 120px;
height: 40px;
background-color: #6747C7;
color: white;
border: none;
position: relative;
z-index: 1;
}
.cta-button:focus{
outline: none
}
پیش نظارہ
ایک طرفہ تکون والے بٹن کے لیے سی ایس ایس کوڈ ایچ ٹی ایم ایل کے سٹیٹک بٹن کو پیش نظارہ کی طرح دکھائے گا
اب آئیے ایک طرفہ تکون والے بٹن کے لیے اوپر دیے گئے سی ایس ایس کوڈ کا قریب سے جائزہ لیتے ہیں
پہلے، ہم “سی ٹی اے کنٹینر” کلاس کو ہدف بنا رہے ہیں جو ایک طرفہ تکون والے بٹن کے لیے ہمارے ایچ ٹی ایم ایل کا والد عنصر ہے اور ہم “مناسب” کی حیثیت سے پوزیشن کی خصوصیت شامل کر رہے ہیں تاکہ جب کسی بچے کے ایچ ٹی ایم ایل عنصر کی پوزیشن کی خصوصیت کو “مطلق” مقرر کیا جائے تو یہ والد ایچ ٹی ایم ایل عنصر کے اندر الگ تھلگ ہو جائے۔ اور پھر ہم “ان لائن بلاک” کے لیے ڈسپلے شامل کر رہے ہیں تاکہ جب ایک اور بٹن شامل کیا جائے تو یہ ایک ہی صف میں ہو۔
دوسرے سیلیکٹر میں، ہم اسی “سی ٹی اے کنٹینر” ایچ ٹی ایم ایل عنصر کو ہدف بنا رہے ہیں لیکن اس بار ہم اس میں
پیسو کلاس شامل کر رہے ہیں۔ یہ وہ حصہ ہے جہاں ہم چھوٹا تکون بناتے ہیں اور پھر اسے بٹن کے دائیں جانب متوازن کرتے ہیں، اور یہ ایک طرفہ تکون والے بٹن کا نتیجہ بناتا ہے۔ تو آئیے دیکھتے ہیں کہ سی ایس ایس کوڈ کیا کر رہے ہیں۔ ہم “مواد” کو خالی سٹرنگ کے طور پر شامل کر رہے ہیں (تاکہ تکون کے اندر کوئی متن نہ ہو)۔ اور پھر ہم پوزیشن کی خصوصیت کو “مطلق” بنا رہے ہیں اور چونکہ ہمارے والد عنصر کی پوزیشن مناسب ہے، تو یہ تکون والد عنصر سے باہر نہیں ہوگی۔ اور ہم اوپر کی خصوصیت کو “50%” اور دائیں کی خصوصیت کو “-14px” شامل کر رہے ہیں۔ آپ کو اپنے بٹن کی چوڑائی کے مطابق دائیں کی خصوصیت کو تبدیل کرنے کی ضرورت پڑ سکتی ہے۔ اور پھر ہم “translateY(-50%)” ویلیو کے ساتھ تکون کو عمودی مرکز میں لاتے ہیں۔ اب ہمیں تکون کو موڑنے کی ضرورت ہے تاکہ یہ ایک حقیقی تکون کی طرح نظر آئے، اور اس کے لیے ہم “rotate(45deg)” ویلیو کو بھی ٹرانسفارم کی خصوصیت میں شامل کر رہے ہیں۔ اس کے بعد، ہم تکون کے اوپر کی حد اور دائیں کی حد شامل کر رہے ہیں، جو اس تیز تکون کو “28px solid #6747C7” ویلیو کے لیے اوپر کی اور دائیں کی حد کی خصوصیات کے ساتھ بناتا ہے۔ اور پھر ہم صرف تکون کی چوڑائی اور اونچائی کو کوئی نہیں کر رہے ہیں کیونکہ بارڈرز ہی یہاں تمام جادو کر رہے ہیں۔”
اور ایک طرفہ تکون کی سی ایس ایس خصوصیات کے فوراً بعد، ہم نے بٹن کے لیے کچھ اسٹائلنگ کی ہے۔ لیکن اس کی چوڑائی “120px” اور اونچائی “40px” مقرر کرکے۔ اور پھر ہم اپنے بٹن کے لیے ایک پس منظر کا رنگ شامل کر رہے ہیں جس میں ایک طرفہ تکون ہو، اور یہ یقینی بنائیں کہ پس منظر کا رنگ تکون کی بارڈر کے رنگ کے برابر ہو، جو کہ “#6747C7” ہے۔ ہم ٹیکسٹ کا رنگ بھی شامل کر رہے ہیں، جسے سی ایس ایس کی خصوصیت سے “سفید” کیا جا رہا ہے، بٹن کی ڈیفالٹ بارڈر کو ختم کرنے کے لیے بارڈر کی سی ایس ایس خصوصیت کو “کوئی نہیں” پر سیٹ کیا جا رہا ہے۔ اور ہم بٹن کی پوزیشن کو بھی مناسب بنا رہے ہیں اور اس کی زڈ انڈیکس “1” مقرر کر رہے ہیں کیونکہ ہم چاہتے ہیں کہ بٹن چھوٹے تکون کے اوپر ہو۔
آخر میں، ہم بٹن کو ہدف بنا رہے ہیں جس میں پیسو کلاس شامل کی گئی ہے، جس کا مطلب ہے کہ جب بٹن کو منتخب کیا جائے تو یہ سی ایس ایس لاگو ہوں گی۔ اور ہم بس اس کی آؤٹ لائن کو “کوئی نہیں” کر رہے ہیں تاکہ بٹن پر وہ پریشان کن آؤٹ لائن نہ ہو۔ اور اس کے ساتھ، آپ کے پاس سی ایس ایس کے ساتھ ایک طرفہ تکون والا ایچ ٹی ایم ایل بٹن ہے۔
نتیجے کے طور پر، اس بلاگ پوسٹ میں کوڈ یہ دکھاتا ہے کہ ایچ ٹی ایم ایل اور سی ایس ایس کا استعمال کرتے ہوئے ایک طرفہ تکون والا بٹن کیسے بنایا جائے۔ محض ایچ ٹی ایم ایل اور سی ایس ایس کا استعمال کرتے ہوئے مختلف شکلوں اور ڈیزائنوں کی ایک وسیع رینج بنانا ممکن ہے، جس میں مطلق پوزیشننگ، ٹرانسفارمز، اور بارڈر کی چالیں شامل ہیں۔ یہ آپ کو اپنی ویب سائٹ میں تخلیقی اور منفرد عناصر شامل کرنے کی اجازت دیتا ہے، بغیر کسی تصاویر یا دیگر خارجی وسائل کی ضرورت کے