CSS width प्रॉपर्टी का उपयोग करके बटन (या किसी भी तत्व) की निश्चित चौड़ाई सेट की जा सकती है। यह बटन के आकार को कंटेंट से स्वतंत्र बनाता है और लेआउट में स्थिरता प्रदान करता है।
उदाहरण
नीचे दिए गए उदाहरण में, बटन पर width: 120px के साथ अन्य स्टाइल्स (गोल कोने, डैश्ड बॉर्डर) लागू किए गए हैं।
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
background-color: yellow;
color: black;
width: 120px;
text-align: center;
font-size: 15px;
padding: 20px;
border-radius: 15px;
border: 3px dashed blue;
}
</style>
</head>
<body>
<h2>Result</h2>
<p>Click below for result:</p>
<button class="btn">Result</button>
</body>
</html>
width के मान:
px- निश्चित पिक्सेल चौड़ाई%- पैरेंट कंटेनर के सापेक्षauto- डिफ़ॉल्ट, कंटेंट के अनुसारmin-width/max-width- न्यूनतम/अधिकतम सीमाfit-content- कंटेंट के अनुसार लेकिन सीमाओं के साथ
नोट: <button> डिफ़ॉल्ट रूप से inline-block जैसा व्यवहार करता है, इसलिए width काम करता है। display: block के साथ फुल-चौड़ाई बटन बना सकते हैं।
