Styling Links & Buttons Free web designing Course Tutorials #22
Styling Links & Buttons
इस ट्यूटोरियल में, हम यह देखने जा रहे हैं कि CSS में बटन कैसे स्टाइल और डिज़ाइन करें और छद्म चयनकर्ता क्या हैं। हम tut22.html के रूप में एक नई फाइल बनाकर और फिर उसमें बॉयलरप्लेट जोड़कर शुरू करेंगे। छद्म चयनकर्ताओं के रूप में शीर्षक दें और <शीर्षक> टैग में अधिक डिज़ाइनिंग करें।
आइए अब HTML भाग को स्टाइल करने के लिए मूल CSS कोड जोड़ें-
.container{
border: 2px solid red;
background-color: rgb(223, 245, 201);
padding: 34px;
margin: 34px auto;
width: 666px;
}
इसे लिखने के बाद आप निम्न परिवर्तनों को देखेंगे-
अब हम दो तरह के बटन डिजाइन करेंगे। एक सामान्य बटन होगा और दूसरा किसी वेबसाइट से लिंक होगा। दोनों के कोड इस प्रकार हैं-
<a href="https://yahoo.com" class="btn">Read more</a>
<button class="btn">Contact us</button>
आप देखेंगे कि दोनों बटन अलग-अलग दिखाई देंगे। इसलिए, इसे थोड़ा आकर्षक दिखाने के लिए, हम इसमें CSS के साथ कुछ स्टाइलिंग करेंगे।
.btn{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
background-color: crimson;
padding:6px;
border: none;
cursor:pointer;
font-size: 13px;
border-radius: 4px;
}
लिंक वाले हिस्से में अंडरलाइन को हटाने के लिए हमें एंकर टैग को इस तरह स्टाइल करना होगा-
a{
text-decoration: none;
color: black;
}
आइए अब देखते हैं कि छद्म चयनकर्ता क्या हैं। एक छद्म वर्ग का उपयोग किसी तत्व की विशेष स्थिति को परिभाषित करने के लिए किया जाता है।
1 जैसे ही आप उस हिस्से को होवर करते हैं, होवर का उपयोग टेक्स्ट के रंग या बटन की पृष्ठभूमि को बदलने के लिए किया जाता है। इसके लिए कोड नीचे जैसा है।
a:hover{
color: rgb(5, 0, 0);
background-color: rgb(221, 166, 38);
}
2 अगला छद्म चयनकर्ता देखा गया है। जैसे ही आप एंकर टैग बटन पर जाते हैं और बताए गए लिंक पर क्लिक करते हैं, तो उसका रंग बदल जाता है। इस गुण को लागू करने के लिए कोड इस प्रकार लिखें-
a:visited{
background-color: yellow;
}
3 अगला चयनकर्ता सक्रिय है। यदि आप किसी बटन पर जाते हैं, और उस पर क्लिक करते हैं, तो यह सक्रिय हो जाता है और विभिन्न गुणों के साथ प्रदर्शित होता है। इसके लिए कोड है-
a:active{
background-color:darkblue;
}
इसी तरह हम छद्म चयनकर्ता को 'बीटीएन' वर्ग में भी रख सकते हैं। इसे लागू करने के लिए कोड इस प्रकार लिखें-
.btn:hover{
color:darkgoldenrod;
background-color:rgb(223, 245, 201);
border: 2px solid black;
}
विभिन्न बटनों और छद्म चयनकर्ताओं के बारे में अधिक जानने के लिए आप बूटस्ट्रैप नामक वेबसाइट पर जा सकते हैं। वहां आपको उनसे जुड़े और भी बटन और प्रॉपर्टीज मिलेंगी। आप वहां बताए गए कुछ गुणों को देख और अभ्यास कर सकते हैं और अपने कौशल को बढ़ा सकते हैं। तब तक आप पिछले ट्यूटोरियल पर जा सकते हैं और अब तक सिखाई गई सभी चीजों का अभ्यास कर सकते हैं। आगामी ट्यूटोरियल्स में, हम अधिक से अधिक CSS गुणों को सीखने जा रहे हैं और एक वेबसाइट को शुरुआत से ही अधिक आकर्षक बना देंगे।
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Pseudo selectors & more designing</title>
<style>
.container{
border: 2px solid red;
background-color: rgb(223, 245, 201);
padding: 34px;
margin: 34px auto;
width: 666px;
}
a{
text-decoration: none;
color: black;
}
a:hover{
color: rgb(5, 0, 0);
background-color: rgb(221, 166, 38);
}
a:visited{
background-color: yellow;
}
a:active{
background-color:darkblue;
}
.btn{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
background-color: crimson;
padding:6px;
border: none;
cursor:pointer;
font-size: 13px;
border-radius: 4px;
}
.btn:hover{
color:darkgoldenrod;
background-color:rgb(223, 245, 201);
border: 2px solid black;
}
</style>
</head>
<body>
<div class="container" id="cont1">
<h3>This is my heading</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, reprehenderit. Quam culpa eius aliquam id cumque saepe, provident odio sed eos quia nihil modi error voluptate vero autem quibusdam aperiam exercitationem! Quam, consequuntur velit.</p>
<a href="https://yahoo.com" class="btn">Read more</a>
<button class="btn">Contact us</button>
</div>
</body>
</html>
