कोड, डेटा और QR टूल

बटन स्टेट जनरेटर

बटन टेक्स्ट, रंग, कोने और disabled शैली सेट करके 6 स्टेट का प्रीव्यू देखें।

ब्राउज़र में ही कामखाता बनाने की ज़रूरत नहींगोपनीयता विवरण ↗

छह स्टेट देखने के लिए controls बदलें।

डिफ़ॉल्ट
होवर
सक्रिय
फोकस
Disabled
लोडिंग
CSS डाउनलोड करें

यह वास्तविक button element के लिए CSS उदाहरण है।

उपयोग कैसे करें

उपयोग कैसे करें

  1. टेक्स्ट, रंग, कोने, disabled लेबल और रंग बदलें।
  2. स्थानीय प्रीव्यू में 6 स्टेट देखें।
  3. CSS कॉपी या डाउनलोड करें।

6 स्पष्ट स्टेट

default, hover, active, focus-visible, disabled और loading उदाहरण शामिल हैं। loading में data-loading और टेक्स्ट लेबल है।

आपके इंटरफ़ेस के लिए आधार

प्रीव्यू और CSS स्थानीय उदाहरण हैं। इस्तेमाल से पहले contrast, आकार, keyboard व्यवहार, disabled semantics और copy जांचें।

कोई बाहरी asset नहीं

सिर्फ standard CSS और text loading indicator है; कोई बाहरी font, image, library या stylesheet नहीं।

अक्सर पूछे जाने वाले सवाल

आप यह भी जानना चाहेंगे

क्या keyboard focus शामिल है?

हाँ। स्पष्ट :focus-visible outline शामिल है।

loading कैसे दिखता है?

data-loading, छोटा CSS indicator और label इस्तेमाल होता है। इसे अपने वास्तविक काम के अनुसार बदलें।

क्या यह पूरा button component है?

नहीं। यह CSS उदाहरण है; अपने markup में वास्तविक button, accessible name, disabled attribute और logic रखें।