सीएसएस बटन
CSS का उपयोग करके बटनों को स्टाइल करना सीखें।
बेसिक बटन स्टाइलिंग
उदाहरण
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
बटन रंग
background-colorबटन का बैकग्राउंड कलर बदलने के लिए प्रॉपर्टी का इस्तेमाल करें:
उदाहरण
.button1 {background-color: #4CAF50;} /* Green */
.button2
{background-color: #008CBA;} /* Blue */
.button3 {background-color:
#f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5
{background-color: #555555;} /* Black */
बटन आकार
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 {border-radius: 12px;}
.button5 {border-radius: 50%;}
रंगीन बटन बॉर्डर
borderबटन पर रंगीन बॉर्डर जोड़ने के लिए प्रॉपर्टी का उपयोग करें:
उदाहरण
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* Green */
}
...
होवर करने योग्य बटन
:hoverजब आप माउस को उसके ऊपर ले जाते हैं तो बटन की शैली बदलने के लिए चयनकर्ता का उपयोग करें ।
युक्ति:transition-duration "होवर" प्रभाव की गति निर्धारित करने के लिए संपत्ति का उपयोग करें :
उदाहरण
.button {
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
...
छाया बटन
box-shadowएक बटन में छाया जोड़ने के लिए संपत्ति का प्रयोग करें:
उदाहरण
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0
rgba(0,0,0,0.19);
}
.button2:hover {
box-shadow: 0 12px
16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
अक्षम बटन
opacityएक बटन में पारदर्शिता जोड़ने के लिए संपत्ति का उपयोग करें ("अक्षम" रूप बनाता है)।
युक्ति:cursor आप संपत्ति को "अनुमति नहीं" के मान के साथ भी जोड़ सकते हैं , जो बटन पर माउस ले जाने पर "नो पार्किंग साइन" प्रदर्शित करेगा:
उदाहरण
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
बटन की चौड़ाई
डिफ़ॉल्ट रूप से, बटन का आकार इसकी टेक्स्ट सामग्री (इसकी सामग्री जितनी विस्तृत) द्वारा निर्धारित किया जाता है। widthबटन की चौड़ाई बदलने के लिए संपत्ति का प्रयोग करें:
उदाहरण
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width:
100%;}
बटन समूह
मार्जिन निकालें और float:leftबटन समूह बनाने के लिए प्रत्येक बटन में जोड़ें:
उदाहरण
.button {
float: left;
}
सीमावर्ती बटन समूह
borderबॉर्डर वाला बटन समूह बनाने के लिए प्रॉपर्टी का उपयोग करें :
उदाहरण
.button {
float: left;
border: 1px
solid green;
}
लंबवत बटन समूह
बटनों को एक-दूसरे के नीचे समूहबद्ध करने के बजाय अगल-बगल के बजाय display:blockउपयोग करें :float:left
उदाहरण
.button {
display: block;
}
छवि पर बटन
एनिमेटेड बटन
उदाहरण
होवर पर एक तीर जोड़ें:
उदाहरण
क्लिक पर "दबाया" प्रभाव जोड़ें:
उदाहरण
होवर पर फीका:
उदाहरण
क्लिक पर "लहर" प्रभाव जोड़ें: