Skip to main content

सीएसएस बटन जनरेटर रंगों, पैडिंग, सीमाओं, छाया और होवर प्रभावों के साथ कस्टम सीएसएस बटन डिज़ाइन करें।

सीएसएस बटन जनरेटर illustration
🎨

सीएसएस बटन जनरेटर

रंगों, पैडिंग, सीमाओं, छाया और होवर प्रभावों के साथ कस्टम सीएसएस बटन डिज़ाइन करें।

1

बटन शैली को अनुकूलित करें

दृश्य नियंत्रणों का उपयोग करके रंग, पैडिंग, फ़ॉन्ट आकार, सीमा और छाया सेट करें।

2

होवेर प्रभाव को कॉन्फ़िगर करें

इंटरएक्टिव फीडबैक के लिए होवेर बैकग्राउंड रंग चुनें।

3

सीएसएस की प्रतिलिपि बनाएं

बटन का पूर्वावलोकन करें और आधार और होवेर सीएसएस शैलियों दोनों को कॉपी करें।

Loading tool...

What Is सीएसएस बटन जनरेटर?

सीएसएस बटन जनरेटर एक व्यापक उपकरण है जो कस्टम बटन शैलियों को दृश्य रूप से डिज़ाइन करने के लिए उपयोग किया जाता है। बटन मूलभूत यूआई तत्व हैं, और उनकी शैली को सही तरीके से प्राप्त करना उपयोगकर्ता अनुभव के लिए महत्वपूर्ण है। यह उपकरण आपको बटन डिज़ाइन के हर पहलू पर पूरा नियंत्रण देता है: पृष्ठभूमि और टेक्स्ट रंग, पैडिंग, फ़ॉन्ट आकार और वजन, सीमा चौड़ाई और रंग, सीमा त्रिज्या, बॉक्स छाया, और होवर राज्य प्रभाव। लाइव पूर्वावलोकन आपके बटन को ठीक उसी तरह दिखाता है जैसे यह एक वेब पेज पर दिखाई देगा, जब आप इस पर माउस ओवर करते हैं तो होवर राज्य सहित। उत्पन्न सीएसएस में आधार बटन शैलियाँ और होवर प्सेव्डो-क्लास दोनों शामिल हैं, जिससे आपको उत्पादन-तैयार कोड मिलता है जिसे आप सीधे अपनी परियोजना में चिपका सकते हैं।

Why Use सीएसएस बटन जनरेटर?

  • सभी बटन गुणों पर पूर्ण नियंत्रण, जिसमें होवेर राज्य भी शामिल हैं
  • वास्तविक होवेर प्रभाव प्रदर्शन के साथ लाइव इंटरएक्टिव पूर्वावलोकन
  • उत्पादन उपयोग के लिए आधार और होवेर दोनों सीएसएस उत्पन्न करता है
  • ब्रांड-मिलान बटन डिज़ाइन के लिए रंग चुनने वाले

Common Use Cases

कॉल-टू-एक्शन बटन

लैंडिंग पृष्ठों और मार्केटिंग साइट्स के लिए आकर्षक सीटीए बटन डिज़ाइन करें।

फ़ॉर्म सबमिट बटन

वेब फ़ॉर्म के लिए सुसंगत और सुलभ सबमिट बटन बनाएं।

नेविगेशन लिंक

स्पष्ट उपयोगकर्ता इंटरैक्शन पैटर्न के लिए नेविगेशन लिंक को बटन की तरह स्टाइल करें।

घटक पुस्तकालय

डिज़ाइन प्रणालियों और घटक पुस्तकालयों के लिए आधार बटन शैलियाँ उत्पन्न करें।

Technical Guide

सीएसएस बटन कई गुणों पर निर्भर करते हैं: पृष्ठभूमि-रंग भरने को निर्धारित करता है, रंग टेक्स्ट दिखावट को नियंत्रित करता है, सीमा आउटलाइन को परिभाषित करती है, सीमा-त्रिज्या गोल कोनों बनाती है, और पैडिंग आंतरिक स्थान को नियंत्रित करती है। ट्रांज़िशन गुण होवर पर चिकने राज्य परिवर्तन को सक्षम बनाता है। फ़ॉन्ट गुण (फ़ॉन्ट-आकार, फ़ॉन्ट-वजन) टाइपोग्राफी को नियंत्रित करते हैं। बॉक्स-छाया गहराई जोड़ती है। सुलभता के लिए, बटनों में कम से कम 44x44 पिक्सेल का स्पर्श लक्ष्य और पर्याप्त रंग विपरीतता (WCAG AA सामान्य टेक्स्ट के लिए 4.5:1) होनी चाहिए। कर्सर: पॉइंटर गुण यह दृश्य प्रतिक्रिया प्रदान करता है कि तत्व पर क्लिक किया जा सकता है। होवर राज्यों में स्पष्ट दृश्य परिवर्तन होना चाहिए, लेकिन बहुत नाटकीय नहीं। फोकस-दृश्यमान शैलियों को कीबोर्ड नेविगेशन के लिए जोड़ने पर विचार करें। बटन तत्व क्रियाओं के लिए और एंकर टैग्स नेविगेशन के लिए उपयोग करें। ट्रांज़िशन गुण को सभी के बजाय विशिष्ट गुणों पर लक्षित करना चाहिए ताकि बेहतर प्रदर्शन हो।

Tips & Best Practices

  • 1
    मोबाइल एक्सेसिबिलिटी के लिए कम से कम 44px टच लक्ष्य सुनिश्चित करें
  • 2
    सूक्ष्म होवेर प्रभावों का उपयोग करें - थोड़ा रंग परिवर्तन और translateY(-1px) अच्छा काम करता है
  • 3
    बटन रंगों को अपने ब्रांड पैलेट से मिलाएं ताकि एकरूपता बनी रहे
  • 4
    होवेर के अलावा फोकस-दृश्यमान शैलियाँ जोड़ें ताकि कीबोर्ड एक्सेसिबिलिटी हो सके

Related Tools

Frequently Asked Questions

Q क्या मोबाइल पर होवेर प्रभाव काम करता है?
मोबाइल पर होवेर प्रभाव ब्राउज़र द्वारा भिन्न होते हैं। इसके बजाय स्पर्श फीडबैक के लिए :active प्सेव्डो-क्लास का उपयोग करने पर विचार करें।
Q मैं बटन को एक्सेसिबल कैसे बना सकता हूँ?
पर्याप्त रंग विपरीत (4.5:1 अनुपात) सुनिश्चित करें, उचित एचटीएमएल बटन तत्वों का उपयोग करें और कीबोर्ड उपयोगकर्ताओं के लिए फोकस शैलियाँ जोड़ें।
Q क्या मैं अक्षम राज्य जोड़ सकता हूँ?
टूल आधार और होवेर शैलियों को उत्पन्न करता है। एक अक्षम राज्य के लिए मैनुअल रूप से अपारदर्शिता: 0.5 और कर्सर: अनुमति नहीं जोड़ें।
Q मुझे पैडिंग मान क्या उपयोग करना चाहिए?
मानक बटनों के लिए, 12px ऊर्ध्वाधर और 24px क्षैतिज एक अच्छी शुरुआत है। बड़े बटन 16px/32px का उपयोग कर सकते हैं।
Q क्या मुझे फ़ॉन्ट-आकार के लिए px या rem का उपयोग करना चाहिए?
सुलभता के लिए rem पसंदीदा है क्योंकि यह उपयोगकर्ता फ़ॉन्ट आकार प्राथमिकताओं का सम्मान करता है। 1rem मूल तत्व फ़ॉन्ट आकार के बराबर होता है।

About This Tool

सीएसएस बटन जनरेटर is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.