CSS बटन
बटन «करो» वाले नियंत्रण हैं — भेजें, सहेजें, अगला। CSS उन्हें साफ़ त्वचा और ईमानदार प्रतिक्रिया दे सकता है जब कोई होवर करे, दबाए, फोकस करे या उन्हें disabled पाए। HTML अर्थपूर्ण रखें (button या submit input); यह पाठ दिखावट और अवस्थाओं के बारे में है।
बटन टूलकिट
📊 एक नज़र में बटन
| हिस्सा | रोज़ का काम |
|---|---|
padding + background + border |
ठोस, पठनीय बटन चेहरा बनाना |
border-radius |
कोने नरम करना (या बड़े radius से कैप्सूल) |
:hover / :active |
दिखाना «मैं इंटरैक्टिव हूँ» और «मैं दबा हूँ» |
:focus-visible |
कीबोर्ड फोकस रिंग दिखती रखें |
:disabled + cursor |
अनुपलब्ध बटन मंद करें; क्लिक करने योग्य होने पर हाथ कर्सर |
एक साझा .btn (या button) स्टाइल करें ताकि पेज की मुख्य क्रियाएँ एक परिवार लगें। टेक्स्ट फ़ील्ड padding पिछला पाठ था — यहाँ क्लिक लक्ष्यों को कपड़े पहनाते हैं।
ठोस प्राथमिक बटन
आरामदायक padding, साफ़ पृष्ठभूमि, पठनीय टेक्स्ट रंग और शांत border-radius से शुरू करें। font: inherit रखें ताकि बटन आस-पास के टेक्स्ट से मेल खाए।
बेस प्राथमिक बटन
cssbutton,
.btn {
display: inline-block;
padding: 0.65rem 1.1rem;
font: inherit;
font-weight: 600;
color: #fff;
background: #0b5fff;
border: 1px solid #0b5fff;
border-radius: 0.5rem;
cursor: pointer;
}Hover और active — ईमानदार प्रतिक्रिया
:hover चेहरे को थोड़ा गहरा या हल्का कर सकता है। :active दबा हुआ महसूस होना चाहिए — एक छाया गहरा या छोटी सी शिफ्ट — पूरी नई नीयन थीम नहीं।
Hover और active
cssbutton:hover,
.btn:hover {
background: #094fd6;
border-color: #094fd6;
}
button:active,
.btn:active {
background: #0844b8;
border-color: #0844b8;
}दिखने वाला फोकस
बिना बदले फोकस स्टाइल कभी न हटाएँ। :focus-visible कीबोर्ड के लिए साफ़ रिंग खींचता है और माउस क्लिक शांत रखता है।
दिखने वाली फोकस रिंग
cssbutton:focus-visible,
.btn:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 3px;
}Disabled बटन दिखते रहें
Disabled बटन अनुपलब्ध लगे — कम opacity या मंद रंग — और हाथ कर्सर मना करे। लेआउट से छिपाएँ नहीं।
Disabled टोन
cssbutton:disabled,
.btn:disabled {
opacity: 0.55;
cursor: not-allowed;
background: #8aa9e8;
border-color: #8aa9e8;
}शांत बटन आदत
एक प्राथमिक त्वचा, साफ़ hover/active, दिखने वाली फोकस रिंग और मंद disabled रखें। Outline/ghost वेरिएंट वही padding और radius साझा करें ताकि सेट संबंधित लगे।
Outline साथी
css.btn-outline {
color: #0b5fff;
background: transparent;
border: 1px solid #0b5fff;
}
.btn-outline:hover {
color: #fff;
background: #0b5fff;
}खुद आज़माएँ
- प्राथमिक
buttonको padding, पृष्ठभूमि, टेक्स्ट रंग औरborder-radiusसे स्टाइल करें। :hoverगहरा करें और:activeथोड़ा और गहरा।:focus-visibleoutline जोड़ें — नंगाoutline: noneनहीं।:disabledबटन मंद करें औरcursor: not-allowedलगाएँ।- वैकल्पिक: वही padding/radius वाला
.btn-outlineजोड़ें।
आम गलतियाँ
- बिना फोकस बदले
outline: none(कीबोर्ड उपयोगकर्ता खो जाते हैं) - बहुत छोटा padding जो मोबाइल टैप लक्ष्य चूकता है
- इस पाठ को input/textarea स्टाइल बनाना (वह फॉर्म कंट्रोल था)
:hoverपर जंगली नीयन थीम जो ब्रांड शांति तोड़ती है- सिर्फ
aस्टाइल करना और असलीbuttonभूल जाना
सारांश
- Padding, पृष्ठभूमि, बॉर्डर और radius ठोस बटन चेहरा बनाते हैं
:hoverऔर:activeईमानदार इंटरैक्शन प्रतिक्रिया देते हैं- दिखने वाली
:focus-visibleरिंग रखें :disabledमंद करें; क्लिक करने योग्य होने परcursor: pointer- फ़ील्ड क्रोम फॉर्म-कंट्रोल पाठ के लिए छोड़ें; यहाँ क्लिक लक्ष्य कपड़े पहनाएँ
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी