श्रेणी: डेवलपर टूल
CSS बटन जनरेटर
लाइव पूर्वावलोकन और कॉपी करने योग्य कोड के साथ अनुकूलन योग्य CSS बटन बनाएँ
बटन को देखकर डिज़ाइन करें और साफ़ HTML तथा CSS कॉपी करें। अपने ब्राउज़र में रंग, बॉर्डर, त्रिज्या, जगह, छाया तथा होवर और फ़ोकस शैलियाँ सेट करें।
होवर और फ़ोकस
पूर्वावलोकन
होवर और फ़ोकस शैलियाँ देखने के लिए पूर्वावलोकन पर कर्सर ले जाएँ या Tab दबाकर वहाँ पहुँचें।
<button class="button" type="button">Get started</button>
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
box-sizing: border-box;
padding: 10px 18px;
border: 1px solid #2f6f4f;
border-radius: 6px;
background: #2f6f4f;
color: #ffffff;
font: inherit;
font-size: 15px;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.button:hover {
background: #255a40;
transform: translateY(-1px);
box-shadow: 0 3px 8px rgb(0 0 0 / 0.16);
}
.button:active {
transform: translateY(0);
}
/* Keyboard focus stays visible — never replace this with outline: none */
.button:focus-visible {
outline: 2px solid #1d4ed8;
outline-offset: 2px;
}
.button:disabled {
opacity: 0.55;
cursor: not-allowed;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.button {
transition: none;
}
.button:hover {
transform: none;
}
}
स्निपेट असली <button> का उपयोग करता है और :focus-visible की रूपरेखा दिखती रहती है। उस रूपरेखा को हटाने पर कीबोर्ड से चलने वाले लोगों को पता ही नहीं चलेगा कि वे कहाँ हैं।
पूर्वावलोकन और बनाया गया कोड, दोनों आपके ब्राउज़र में ही बनते हैं।
इस पेज पर सब कुछ आपके ब्राउज़र में संसाधित होता है। कुछ भी अपलोड नहीं होता।
यह टूल क्या करता है
यह एक बटन के लिए दृश्य संपादक है: रंग, बॉर्डर, त्रिज्या, पैडिंग, अक्षरों का आकार और वज़न, छाया, और होवर पर क्या बदलता है। पूर्वावलोकन उसी CSS से सजा होता है जिसे आप कॉपी करते हैं, इसलिए उस पर कर्सर ले जाने या Tab से पहुँचने पर असली अवस्थाएँ दिखती हैं, अनुमान नहीं। दो चीज़ें संयोग पर नहीं छोड़ी गई हैं। मार्कअप सजाया हुआ div नहीं, असली `<button type="button">` है, इसलिए फ़ोकस और कीबोर्ड संचालन अपने आप मिल जाते हैं। और आउटपुट हमेशा दिखने वाली `:focus-visible` रूपरेखा बनाए रखता है — बनाए गए बटन CSS में सबसे आम पहुँच-संबंधी गड़बड़ी वही `outline: none` है जो कीबोर्ड उपयोगकर्ताओं को यह पता ही नहीं लगने देती कि वे पेज पर कहाँ हैं।
इस्तेमाल कैसे करें
- लेबल और क्लास नाम तय करें, फिर पृष्ठभूमि, टेक्स्ट और बॉर्डर के रंग चुनें।
- जब तक पूर्वावलोकन ठीक न लगे, त्रिज्या, बॉर्डर की मोटाई, पैडिंग तथा फ़ॉन्ट का आकार और वज़न समायोजित करें।
- होवर पृष्ठभूमि और फ़ोकस रिंग सेट करें, फिर HTML और CSS कॉपी करें।
निजता
यह टूल पूरी तरह आपके ब्राउज़र में चलता है। आपका डेटा कभी अपलोड, सेव या साझा नहीं होता — टैब बंद करते ही वह हट जाता है।
अक्सर पूछे जाने वाले सवाल
- क्या मैं होवर शैलियाँ बना सकता/सकती हूँ?
- हाँ। होवर पृष्ठभूमि, वैकल्पिक उठान और छाया का बदलाव सब बने हुए CSS का हिस्सा हैं, एक अलग :hover नियम के रूप में जिसे आप बाद में संपादित कर सकते हैं।
- क्या बटन को JavaScript चाहिए?
- नहीं। आउटपुट सादा HTML और CSS है। स्क्रिप्ट सिर्फ़ इस बात के लिए चाहिए कि दबाने पर बटन करता क्या है।
- क्या मैं HTML और CSS अलग-अलग कॉपी कर सकता/सकती हूँ?
- हाँ — दोनों के अपने कॉपी बटन हैं, इसलिए CSS को स्टाइलशीट में और मार्कअप को उसकी जगह पर ले जाया जा सकता है।
- CSS में फ़ोकस रूपरेखा क्यों है?
- क्योंकि उसके बिना कीबोर्ड से चलने वाले लोग देख ही नहीं पाते कि वे किस नियंत्रण पर हैं। बना हुआ नियम :focus-visible इस्तेमाल करता है, इसलिए रिंग कीबोर्ड फ़ोकस पर दिखती है और माउस के हर क्लिक पर नहीं।
- क्या बना हुआ कोड स्थानीय रहता है?
- हाँ। सारी सेटिंग्स, पूर्वावलोकन और बने हुए स्निपेट आपके ब्राउज़र में ही रहते हैं।