CSS बटन

सीएसएस के लिए बटन शैली सेट करने के तरीके सीखें।

बुनियादी बटन शैली

इंस्टैंस

.button {
  बैकग्राउंड-रंग: #4CAF50; /* हरा */
  border: none;
  रंग: श्वेत;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

स्वयं प्रयोग करें

बटन रंग

कृपया background-color बटन के पृष्ठभूमि रंग को परिवर्तित करने की विशेषता:

इंस्टैंस

.button1 {background-color: #4CAF50;} /* हरा */
.button2 {background-color: #008CBA;} /* नीला */
.button3 {background-color: #f44336;} /* नारंगी */ 
.button4 {background-color: #e7e7e7; color: black;} /* ग्रे */ 
.button5 {background-color: #555555;} /* काला */

स्वयं प्रयोग करें

बटन आकार

कृपया font-size बटन के फ़ॉन्ट आकार को परिवर्तित करने की विशेषता:

इंस्टैंस

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}

स्वयं प्रयोग करें

कृपया padding बटन के अंदरी घाटी को परिवर्तित करने की विशेषता:

इंस्टैंस

.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}

स्वयं प्रयोग करें

गोलाकार बटन

कृपया border-radius बटन को गोलाकार करने के लिए विशेषता:

इंस्टैंस

.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {बॉर्डर-रेडियस: 12प्रीमीटर;}
.button5 {बॉर्डर-रेडियस: 50%;}

स्वयं प्रयोग करें

रंगीन बॉर्डर वाले बटन

कृपया border गुण को बटन को रंगीन बॉर्डर जोड़ें:

इंस्टैंस

.button1 {
  बैकग्राउंड-रंग: श्वेत;
  रंग: श्वेत;
  बॉर्डर: 2प्रीमीटर सॉलिड #4CAF50; /* हरा */;
}
...

स्वयं प्रयोग करें

हॉवर बटन


जब माउस बटन के ऊपर जाए तो :hover चयनकर्ता को बटन की शैली को बदल सकता है。

संकेतक:कृपया ट्रांजिशन-ड्यूरेशन गुण को "हॉवर" प्रभाव की गति निर्धारित करें:

इंस्टैंस

.button {
  ट्रांजिशन-ड्यूरेशन: 0.4सेकंड;
}
.button:hover {
  बैकग्राउंड-रंग: #4CAF50; /* हरा */
  रंग: श्वेत;
}
...

स्वयं प्रयोग करें

छाया बटन

कृपया बॉक्स-शैड गुण को बटन को छाया जोड़ें:

इंस्टैंस

.button1 {
  बॉक्स-शैड: 0 8प्रीमीटर 16प्रीमीटर 0 रेडियांस 0 एल्बा (0,0,0,0.2), 0 6प्रीमीटर 20प्रीमीटर 0 रेडियांस 0 एल्बा (0,0,0,0.19);
}
.button2:hover {
  बॉक्स-शैड: 0 12प्रीमीटर 16प्रीमीटर 0 रेडियांस 0 एल्बा (0,0,0,0.24), 0 17प्रीमीटर 50प्रीमीटर 0 रेडियांस 0 एल्बा (0,0,0,0.19);
}

स्वयं प्रयोग करें

अनुमति नहीं है बटन

कृपया ऑपासिटी गुण को बटन को पारदर्शीता जोड़ें (अनुमति नहीं है आकृति बनाएं).

संकेतक:आप अधिकतर not-allowed मूल्य वाले कर्सर गुण, जब आप माउस को बटन पर रखते हैं तो यह गुण "no parking sign" (अनुमति नहीं है साइन) दिखाता है:

इंस्टैंस

.disabled {
  ऑपासिटी: 0.6;
  कर्सर: not-allowed;
}

स्वयं प्रयोग करें

बटन विस्तार


मूलभूत रूप से, बटन का आकार उसके पाठ सामग्री पर निर्भर करता है (सामग्री के विस्तार के समान). कृपया विस्तार गुण को बटन की चौड़ाई को परिवर्तित करने के लिए जोड़ें:

इंस्टैंस

स्वयं प्रयोग करें

बटन ग्रुप

　

माउंट पॉइंट को मिटाएँ और हर बटन पर एकत्रीकरण करें float:leftबॉर्डर वाले बटन समूह का निर्माण करने के लिए:

इंस्टैंस

.button {
  float: left;
}

स्वयं प्रयोग करें

बॉर्डर वाले बटन समूह

　

उपयोग border गार्डिन की गार्डिन के द्वारा बॉर्डर वाले बटन समूह का निर्माण करने के लिए गार्डिन:

इंस्टैंस

.button {
  float: left;
  border: 1px solid green;
}

स्वयं प्रयोग करें

खड़ी बटन समूह

उपयोग display:block बदले float:left बटन को ऊपर-नीचे ग्रुप करें, नहीं कि साथ-साथ:

इंस्टैंस

.button {
  display: block;
}

स्वयं प्रयोग करें

इमेज पर बटन

कॉफी

स्वयं प्रयोग करें

एनिमेटेड बटन

इंस्टैंस 1

माउस हॉवर पर तीर जोड़ें:

स्वयं प्रयोग करें

इंस्टैंस 2

क्लिक करने पर 'कुंजी दबाए हुए' प्रभाव जोड़ें:

स्वयं प्रयोग करें

इंस्टैंस 3

माउस हॉवर पर फ़ॉड इन:

स्वयं प्रयोग करें

इंस्टैंस 4

क्लिक करने पर 'रिप्लेक्स' प्रभाव जोड़ें:

स्वयं प्रयोग करें