सीएसएस बटन

वेबसाइट डिजाइन करते समय, आपके पास अक्सर एक बटन होता है जिसे आप एक निश्चित तरीके से देखना चाहते हैं। उदाहरण के लिए, आप बटन पर उपयोगकर्ता का ध्यान आकर्षित करने के लिए अन्य पृष्ठ तत्वों की तुलना में एक अलग पृष्ठभूमि रंग के लिए एक बटन चाहते हैं।

CSS का उपयोग करके, डेवलपर स्टाइल बटन बना सकते हैं। CSS आपको अन्य चीजों के अलावा एक बटन का रंग, टेक्स्ट का आकार, बॉर्डर, चौड़ाई और ऊंचाई बदलने की अनुमति देता है।

यह ट्यूटोरियल उदाहरणों के साथ चर्चा करेगा कि HTML बटन को स्टाइल करने के लिए कई CSS गुणों का उपयोग कैसे करें। इस ट्यूटोरियल को पढ़ने के अंत तक, आप CSS का उपयोग करने वाले बटन को स्टाइल करने के विशेषज्ञ होंगे।

बटन का अवलोकन

आप HTML में एक बटन को कई अलग-अलग तरीकों से परिभाषित कर सकते हैं। दो सबसे आम तरीके हैं <button> टैग या एक <input type=“button”> तत्व। ये दृष्टिकोण एक ही प्रकार का बटन लौटाते हैं।

HTML कोड का उपयोग एक बटन को परिभाषित करने के लिए किया जाता है। बिना किसी स्टाइल के HTML बटन कैसा दिखता है:

इस बटन के लिए हमने जो कोड इस्तेमाल किया है वह है:

<button>Click me</button>


यह बटन डिफ़ॉल्ट HTML शैलियों का उपयोग करता है, जिसका अर्थ है कि अभी बटन बल्कि सादा दिखता है।

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

यदि हम अपने बटन को स्टाइल करना चाहते हैं - दूसरे शब्दों में, यह अनुकूलित करने के लिए कि यह पेज पर कैसा दिखता है - हमें CSS का उपयोग करने की आवश्यकता है। इस लेख में, हम चर्चा करेंगे कि एक बटन के लिए निम्नलिखित कैसे करें:

• पृष्ठभूमि का रंग बदलें।
• पाठ का रंग बदलें।
• टेक्स्ट का आकार बदलें।
• पैडिंग जोड़ें।
• कोनों को गोल करें।
• रंगीन बॉर्डर जोड़ें.
• :होवर सुविधा का उपयोग करें।
• एक छाया जोड़ें।
• चौड़ाई बदलें।
• इसे अक्षम करें।
• इसे एनिमेट करें।

हम यह भी चर्चा करेंगे कि क्षैतिज और लंबवत बटन समूह कैसे बनाएं।

पृष्ठभूमि का रंग

जब आप कोई बटन डिज़ाइन कर रहे होते हैं, तो सबसे पहले आप जो करना चाहते हैं, वह बटन के लिए पृष्ठभूमि रंग सेट करना है। डिफ़ॉल्ट रूप से, एक बटन में एक सफेद पृष्ठभूमि और काला टेक्स्ट होता है। CSS बैकग्राउंड-कलर प्रॉपर्टी का उपयोग करके, हम एक बटन के बैकग्राउंड का रंग बदल सकते हैं।

मान लीजिए कि हम एक वेबसाइट के लिए एक बटन डिजाइन कर रहे हैं और चाहते हैं कि बटन का बैकग्राउंड गुलाबी हो। हम निम्नलिखित CSS कोड का उपयोग करके अपने बटन का रंग बदल सकते हैं:

index.html

<button class="button">Click me</button>

styles.css

.button { 
	width: 100px;
	height: 50px;
background-color: pink;
}

हमारा कोड लौटाता है:

बैकग्राउंड-कलर प्रॉपर्टी का इस्तेमाल करते हुए, हमने अपने बटन के बैकग्राउंड कलर को पिंक में बदल दिया। हम इस प्रॉपर्टी का उपयोग करके अपने बटन के बैकग्राउंड कलर को किसी भी रंग में बदल सकते हैं।

पाठ का रंग

एक बटन के टेक्स्ट का रंग बदलने के लिए, आप कलर प्रॉपर्टी का उपयोग कर सकते हैं। मान लीजिए कि हम एक बटन डिजाइन कर रहे हैं और हम चाहते हैं कि बटन में गुलाबी पृष्ठभूमि और हरे रंग का टेक्स्ट हो। हम निम्नलिखित कोड का उपयोग करके यह बटन बना सकते हैं:

index.html

<button class="button">Click me</button>

styles.css

.button { 
	width: 100px;
	height: 50px;
	color: green;
background-color: pink;
}

हमारा कोड लौटाता है:

हमारे कोड में, हम रंग का उपयोग करते हैं:हरा; हमारे बटन में टेक्स्ट के रंग को हरे रंग में सेट करने के लिए संपत्ति।

पाठ आकार

एक बटन के अंदर का टेक्स्ट कितना बड़ा होगा, इसे परिभाषित करने के लिए आप CSS font-size प्रॉपर्टी का उपयोग कर सकते हैं। मान लीजिए हम चाहते हैं कि टेक्स्ट का फ़ॉन्ट आकार 20px हो। हम निम्नलिखित कोड का उपयोग करके ऐसा कर सकते हैं:

index.html

<button class="button">Click me</button>

styles.css

.button { 
	width: 100px;
	height: 50px;
	background-color: blue;
	color: white;
font-size: 20px;
}

हमारा कोड लौटाता है:

हमारा बटन पहले जैसा ही आकार का है, लेकिन अब इसके अंदर के फॉन्ट का आकार 20px है। हमने अपने बटन में टेक्स्ट का आकार सेट करने के लिए फ़ॉन्ट-आकार विशेषता का उपयोग किया।

पैडिंग

एक बटन डिजाइन करते समय, आप यह तय कर सकते हैं कि आप एक बटन के अंदर टेक्स्ट और बटन की बाहरी दीवारों के बीच एक निश्चित मात्रा में स्थान चाहते हैं। यहीं से पैडिंग प्रॉपर्टी आती है।

पैडिंग प्रॉपर्टी एक बटन के टेक्स्ट और उसकी सीमाओं के बीच एक निश्चित मात्रा में स्थान को परिभाषित करने के लिए लंबाई संकेतक (पीएक्स, ईएम, और इसी तरह) या प्रतिशत मानों का उपयोग करती है।

मान लीजिए हम अपने पेज पर दो बटन बनाना चाहते हैं। एक बटन में 40px की पैडिंग होनी चाहिए, और दूसरे में 20px की पैडिंग होनी चाहिए। हम निम्नलिखित कोड का उपयोग करके ये बटन बना सकते हैं:

index.html

<button class="button1">Click me</button>
<button class="button2">Click me</button>

styles.css

.button1 {
	padding: 20px;
	font-size: 16px;
	background-color: blue;
	color: white;
}

.button2 {
	padding: 40px;
	font-size: 16px;
	background-color: blue;
	color: white;
}

हमारा कोड लौटाता है:

हमारे पहले बटन में बटन के अंदर के टेक्स्ट और बटन के बॉर्डर के बीच 20px की सीमा होती है। हमारे दूसरे बटन में बटन के टेक्स्ट और बॉर्डर के बीच 40px की सीमा होती है। इन बटनों के लिए, यह सुनिश्चित करने के लिए कि इस पैडिंग के लिए पर्याप्त जगह है, हम चौड़ाई या ऊंचाई विशेषताओं को निर्दिष्ट नहीं करते हैं। (हम नीचे इन विशेषताओं पर चर्चा करेंगे।)

गोल कोने

डिफ़ॉल्ट रूप से, HTML के बटनों में चौकोर किनारे होते हैं। हालाँकि आप यह तय कर सकते हैं कि आप चाहते हैं कि आपके बटन गोल कोने वाले हों।

गोलाकार कोनों के साथ आयताकार बटन बनाने के लिए आप सीमा-त्रिज्या संपत्ति का उपयोग कर सकते हैं। सीमा-त्रिज्या संपत्ति का उपयोग करने वाले कोड के तीन उदाहरण नीचे दिए गए हैं। विभिन्न त्रिज्या आकारों के प्रभाव को स्पष्ट करने के लिए, प्रत्येक उदाहरण एक भिन्न आकार की सीमा त्रिज्या का उपयोग करता है।

index.html

<button class="button1">Click me</button>
<button class="button2">Click me</button>
<button class="button3">Click me</button>

styles.css

.button1 {
	width: 100px;
	height: 50px;
	background-color: blue;
	color: white;
border-radius: 5px;
}

.button2 {
	width: 100px;
	height: 50px;
	background-color: blue;
	color: white;
border-radius: 10px;
}

.button3 {
	width: 100px;
	height: 50px;
	background-color: blue;
	color: white;
border-radius: 15px;
}

हमारा कोड लौटाता है:

इस उदाहरण में, हमने तीन बटन बनाए। एक बटन की सीमा त्रिज्या जितनी बड़ी होती है, बटन के कोने उतने ही अधिक गोल होते हैं।

बॉर्डर कलर

आप CSS बॉर्डर प्रॉपर्टी वाले बटन में एक कस्टम रंगीन बॉर्डर जोड़ सकते हैं।

मान लीजिए कि आप रंगीन बॉर्डर वाला एक बटन बनाना चाहते हैं ताकि उपयोगकर्ता के लिए बटन की सीमाएं स्पष्ट हों। आप निम्न कोड का उपयोग करके ऐसा बटन बना सकते हैं:

index.html

<button class="button">Click me</button>

styles.css

.button {
	background-color: white;
	color: black;
	border: 3px solid #ffb6c1; // Light pink
	padding: 25px;
}

हमारा कोड लौटाता है:

हमारे बटन की पृष्ठभूमि सफेद है, इसकी सामग्री काली है, और इसके सभी किनारों पर 25px की पैडिंग है। हमने अपने बटन के चारों ओर एक 3px-चौड़ा ठोस बॉर्डर बनाने के लिए बॉर्डर प्रॉपर्टी का उपयोग किया, और हमने अपनी बॉर्डर का रंग #ffb6c1 पर सेट किया, जो कि हल्के गुलाबी रंग के लिए हेक्साडेसिमल मान है।

यदि आप सीमा संपत्ति के बारे में अधिक जानना चाहते हैं, तो सीएसएस सीमा संपत्ति पर हमारा लेख पढ़ें।

होवर करें

जब कोई उपयोगकर्ता अपने कर्सर के साथ बटन पर होवर करता है तो आप बटन की शैली बदलने के लिए वेब पेज को निर्देशित करने के लिए सीएसएस:होवर चयनकर्ता का उपयोग कर सकते हैं।

मान लीजिए कि हम काले टेक्स्ट और एक सफेद पृष्ठभूमि के साथ एक बटन डिजाइन कर रहे हैं, और हम चाहते हैं कि इसका टेक्स्ट रंग सफेद में बदल जाए और इसका पृष्ठभूमि रंग हरे रंग में बदल जाए जब उपयोगकर्ता इस पर होवर करता है। हम निम्नलिखित कोड का उपयोग करके इस कार्य को पूरा कर सकते हैं:

index.html

<button class="button">Click me</button>

styles.css

.button {
	background-color: white;
	color: black;
	border: 3px solid #ffb6c1;
	padding: 25px;
}

.button:hover {
	background-color: green;
	color: white;
}

यह रहा हमारे कोड का परिणाम:

उपरोक्त आरेख में पहला बटन दिखाता है कि जब उपयोगकर्ता बटन पर होवर नहीं कर रहा होता है तो हमारा बटन कैसा दिखाई देता है। जैसा कि आप देख सकते हैं, कोड काले टेक्स्ट, गुलाबी बॉर्डर और 25px पैडिंग के साथ एक सफेद बटन देता है। यह बटन की डिफ़ॉल्ट स्थिति है। लेकिन जब उपयोगकर्ता बटन पर होवर करता है, तो बटन का पृष्ठभूमि रंग हरे रंग में बदल जाता है, और बटन में टेक्स्ट का रंग सफेद हो जाता है।

जैसे ही उपयोगकर्ता का कर्सर बटन से दूर जाता है, बटन अपनी डिफ़ॉल्ट स्थिति में वापस आ जाएगा।

इसके अलावा, हम यह निर्दिष्ट करने के लिए ट्रांज़िशन-अवधि विशेषता का उपयोग कर सकते हैं कि उपयोगकर्ता द्वारा अपने कर्सर के साथ उस पर होवर करने के बाद बटन को बदलने में कितना समय लगना चाहिए। इसलिए, यदि हम चाहते हैं कि उपरोक्त बटन को बदलने में 1 सेकंड का समय लगे (हरे रंग की पृष्ठभूमि और सफेद पाठ होने के लिए), तो हम इस कोड का उपयोग कर सकते हैं:

.button {
	…
	transition-duration: 1s;
}

अब जब उपयोगकर्ता बटन पर होवर करता है, तो बटन को बदलने में एक सेकंड का समय लगेगा। आप CSS ट्रांज़िशन के बारे में हमारे शुरुआती गाइड में CSS ट्रांज़िशन के बारे में अधिक जान सकते हैं।

छाया

बटन शैडो बनाने के लिए आप CSS बॉक्स-शैडो प्रॉपर्टी का उपयोग कर सकते हैं। बॉक्स-छाया गुण कई मापदंडों में लेता है। आप हमारे CSS बॉक्स-शैडो ट्यूटोरियल में इन मापदंडों के बारे में जान सकते हैं।

मान लीजिए कि हम एक बटन डिजाइन कर रहे हैं और हम चाहते हैं कि इसमें एक ड्रॉप शैडो हो। हम बटन के लिए निम्नलिखित कोड का उपयोग करके यह छाया बना सकते हैं:

index.html

<button class="button">Click me</button>

styles.css

.button {
	background-color: white;
	color: black;
	border: 3px solid #ffb6c1;
	padding: 25px;
	box-shadow: 0 10px 10px 0 rgba(0,0,0,0.2);
}

हमारा कोड लौटाता है:

इस उदाहरण में, हमने अपने बटन में एक शैडो जोड़ा। हमने अपनी छाया के लिए जो पैरामीटर निर्दिष्ट किए हैं वे इस प्रकार हैं:

• एक्स-ऑफ़सेट 0 है, जिसका अर्थ है कि हमारी छाया सीधे हमारे बटन के नीचे दिखाई देती है।
• y-ऑफ़सेट 10px है, जिसका अर्थ है कि हमारी छाया हमारे बटन के नीचे 10px तक फैली हुई है।
• धुंधला त्रिज्या 10px है, जिसका अर्थ है कि हमारी छाया का धुंधला प्रभाव पड़ता है।
• हमारे बटन की छाया के लिए फैलाव त्रिज्या 0 है, इसलिए धुंध के आसपास कोई फैलाव नहीं है।
• हमारी छाया का रंग rgba(0,0,0,0.2) है, जो हल्का भूरा है।

जैसा कि आप ऊपर दिए गए कोड परिणाम में देख सकते हैं, हमारा बटन इन सभी गुणों के साथ दिखाई देता है।

चौड़ाई

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

यहां विभिन्न चौड़ाई वाले तीन बटनों का उदाहरण दिया गया है:

index.html

<button class="button1">Click me</button>
<button class="button2">Click me</button>
<button class="button3">Click me</button>

styles.css

.button1 {
	background-color: white;
	color: black;
	border: 3px solid #ffb6c1;
	padding: 25px;
	width: 250px;
}

.button2 {
	background-color: white;
	color: black;
	border: 3px solid #ffb6c1;
	padding: 25px;
	width: 50%;
}

.button2 {
	background-color: white;
	color: black;
	border: 3px solid #ffb6c1;
	padding: 25px;
	width: 100%;
}

हमारा कोड लौटाता है:

हमारे उदाहरण में, हमने अलग-अलग चौड़ाई वाले तीन बटन बनाए।

बटन अक्षम करना

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

अपारदर्शिता और कर्सर गुणों का उपयोग करके, आप एक अक्षम बटन बना सकते हैं। अपारदर्शिता गुण एक बटन में पारदर्शिता जोड़ता है। इससे ऐसा लगता है कि यह अक्षम है। डिफ़ॉल्ट अस्पष्टता 1 है, जो बिना पारदर्शिता वाला रंग प्रदर्शित करती है। आप सीएसएस अपारदर्शिता संपत्ति के बारे में हमारे सीएसएस अस्पष्टता गाइड में अधिक जान सकते हैं।

कर्सर गुण, जब "अनुमति नहीं" मान निर्दिष्ट किया जाता है, तो बटन को निष्क्रिय कर देता है। जब उपयोगकर्ता इस मान के साथ एक बटन पर होवर करता है, तो कर्सर एक स्टॉप साइन दिखाएगा।

यहां HTML में सामान्य बटन के लिए कोड और उसके बाद अक्षम बटन के लिए कोड दिया गया है:

index.html

<button class="button1">Click me</button>
<button class="button2">Click me</button>

styles.css

.button1 {
	background-color: #ffb6c1;
	color: black;
	padding: 25px;
}

.button2 {
	background-color: #ffb6c1;
	color: black;
	padding: 25px;
  	border: none;
  	opacity: 0.5;
  	cursor: not-allowed;
}

हमारा कोड लौटाता है:

दोनों बटन गुलाबी रंग के हैं #ffb6c1 पृष्ठभूमि। पहले बटन की पृष्ठभूमि पूरी तरह से अपारदर्शी है, जो कि डिफ़ॉल्ट है; यह बटन कार्यात्मक है (जो कि डिफ़ॉल्ट है)। दूसरे बटन में अपारदर्शिता गुण 0.5 . पर सेट है और कर्सर प्रॉपर्टी का मान not-allowed . पर सेट है . यह अधिक पारदर्शी, गैर-कार्यात्मक (अक्षम) बटन बनाता है।

बटन समूह बनाना

जब आप कोई साइट विकसित कर रहे हों, तो आप बटनों का एक समूह बनाना चाह सकते हैं। उदाहरण के लिए, यदि आप कोई प्रपत्र डिज़ाइन कर रहे हैं, तो हो सकता है कि आपके पास तीन बटनों वाला एक बटन समूह हो, जो उपयोगकर्ता को प्रपत्र को सहेजने, वापस जाने या प्रपत्र के अगले पृष्ठ पर जाने की अनुमति देता हो।

क्षैतिज बटन समूह

यदि आप चाहते हैं कि बटन साथ-साथ दिखाई दें, तो आपको एक CSS बटन समूह बनाना होगा। आप उन बटनों को फ़्लोट करके एक बटन समूह बना सकते हैं जिन्हें आप अपने समूह में बाईं ओर दिखाना चाहते हैं। आप CSS फ़्लोटिंग के बारे में हमारे गाइड में CSS फ़्लोटिंग के बारे में अधिक जान सकते हैं। क्षैतिज बटन समूह के लिए कोड का एक उदाहरण यहां दिया गया है:

index.html

<button class="button">Click me</button>
<button class="button">Click me</button>
<button class="button">Click me</button>

styles.css

.button {
background-color: #ffb6c1;
	color: black;
	padding: 25px;
  	border: none;
	float: left;
}

हमारा कोड लौटाता है:

जैसा कि आप देख सकते हैं, हमने तीन बटन बनाए। ये अगल-बगल दिखाई देते हैं।

इसी तरह, हम बटनों का एक समूह बनाने के लिए एक सीमा सीएसएस गुण निर्दिष्ट कर सकते हैं, जिनमें से प्रत्येक की अपनी सीमाएँ हों। यहां वह कोड है जिसका उपयोग हम सीमाओं के साथ एक बटन समूह बनाने के लिए कर सकते हैं:

index.html

<button class="button">Click me</button>
<button class="button">Click me</button>
<button class="button">Click me</button>

styles.css

.button {
background-color: #ffb6c1;
	color: black;
	padding: 25px;
  	border: 2px solid blue;
	float: left;
}

हमारा कोड लौटाता है:

हमारे कोड में, हमने अपने प्रत्येक बटन के चारों ओर एक 2px ठोस नीली सीमा निर्दिष्ट की है। यह हमें अपने समूह के प्रत्येक बटन को नेत्रहीन रूप से अलग करने की अनुमति देता है।

वर्टिकल बटन ग्रुप

अक्सर, जब आप एक बटन समूह डिज़ाइन कर रहे होते हैं, तो आप चाहते हैं कि बटन लंबवत रूप से दिखाई दें। यहीं पर डिस्प्ले:ब्लॉक सीएसएस प्रॉपर्टी आती है।

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

index.html

<button class="button">Click me</button>
<button class="button">Click me</button>
<button class="button">Click me</button>

styles.css

.button {
background-color: #ffb6c1;
	color: black;
	padding: 25px;
  	border: 2px solid blue;
display: block;
}

हमारा कोड लौटाता है:

हमारा वेब ब्राउज़र इन बटनों को एक साथ समूहित करता है और उन्हें लंबवत रूप से प्रदर्शित करता है।

एनिमेटिंग बटन

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

दबाया गया

सीएसएस में, आप एक ऐसा प्रभाव बना सकते हैं जिससे यह दिखता है कि जब उपयोगकर्ता उस पर क्लिक करता है तो एक बटन दबाया जाता है।

उदाहरण के लिए, मान लें कि आप चाहते हैं कि उपयोगकर्ता के क्लिक करने के 0.5 सेकंड के बाद गहरे भूरे रंग की छाया वाला हल्का नीला बटन हल्के भूरे रंग के साथ गुलाबी हो जाए। इससे उपयोगकर्ता को यह अहसास होगा कि वे शारीरिक रूप से एक बटन दबा रहे हैं। यहां वह कोड है जिसका उपयोग आप इस कार्य को पूरा करने के लिए कर सकते हैं:

index.html

<button class="button">Click me</button>

styles.css

.button {
   padding: 20px;
   font-size: 15px;
   color: white;
   background-color: lightblue;
   border: none;
   transition-duration: 0.5s;
   border-radius: 8px;
   box-shadow: 0 5px gray;
}

.button:active {
  background-color: #ffb6c1;
  box-shadow: 0 5px lightgray;
  transform: translateY(5px);
}

यह रहा हमारे कोड का परिणाम:

बाईं ओर आप देख सकते हैं कि क्लिक करने से पहले हमारा बटन कैसा दिखाई देता है। बटन हल्का नीला है और इसमें गहरे भूरे रंग की बॉक्स छाया है। दाईं ओर, आप हमारे बटन पर क्लिक करने के बाद उसकी उपस्थिति देख सकते हैं (और निर्दिष्ट संक्रमण अवधि बीतने के बाद)। बटन में एक गुलाबी पृष्ठभूमि और एक हल्के भूरे रंग की बॉक्स छाया है।

आइए हमारे कोड को तोड़ दें। हमारे .button शैली में, हम:

• हमारे बटन के चारों ओर एक 20px पैडिंग बनाएं।
• हमारे बटन के टेक्स्ट का फ़ॉन्ट आकार 15px पर सेट करें।
• हमारे बटन के टेक्स्ट का रंग सफेद पर सेट करें।
• हमारे बटन का रंग हल्का नीला सेट करें।
• हमारे बटन के आस-पास की डिफ़ॉल्ट सीमा को हटा दिया।
• हमारे होवर ट्रांज़िशन की अवधि को 0.5 सेकंड पर सेट करें।
• 8px का बॉर्डर-त्रिज्या सेट करें, जो हमारे बटन के लिए गोल कोने बनाता है
• एक ग्रे बॉक्स शैडो सेट करें जो 5px लंबा हो और हमारे बटन के नीचे दिखाई दे।

ये हमारे बटन के लिए स्टाइल सेट करते हैं जब उपयोगकर्ता अपने कर्सर के साथ बटन पर होवर नहीं कर रहा होता है। हमारे .button:active शैली में, हम:

• बटन की पृष्ठभूमि का रंग हल्का गुलाबी पर सेट करें।
• एक हल्के भूरे रंग की छाया सेट करें जो 5px लंबी हो और हमारे बटन के नीचे दिखाई दे।
• एक translationY() परिवर्तन सेट करें जिससे हमारा बटन दबाया हुआ दिखाई दे। आप इस बदलाव के बारे में करियर कर्म सीएसएस 2डी ट्रांसफॉर्म गाइड में और जान सकते हैं।

ये शैलियाँ हमें एक ऐसा प्रभाव बनाने की अनुमति देती हैं जो उपयोगकर्ता द्वारा बटन पर होवर करने पर ट्रिगर होता है।

फ़ेड-इन

हम एक बटन पर फेड-इन प्रभाव बनाने के लिए संक्रमण और अस्पष्टता गुणों का उपयोग कर सकते हैं। :होवर चयनकर्ता के साथ संयुक्त होने पर, जब उपयोगकर्ता किसी ऑब्जेक्ट पर होवर करता है तो फ़ेड-इन प्रभाव सक्रिय हो जाता है—इस मामले में, एक बटन।

यहाँ वह कोड है जिसका उपयोग हम फ़ेड-इन बटन बनाने के लिए कर सकते हैं:

.button {
   padding: 20px;
   font-size: 15px;
   color: white;
   background-color: lightblue;
   border: none;
   -webkit-transition-duration: 0.5s;
   transition-duration: 0.5s;
   border-radius: 8px;
   opacity: 0.7;
}

.button:hover {
  opacity: 1;
}

यह रहा हमारे कोड का परिणाम:

बाईं ओर, आप देख सकते हैं कि हमारा बटन अधिक पारदर्शी दिखाई देता है। यह अपारदर्शिता गुण का मान 0.7 पर सेट करने का परिणाम है।

उपयोगकर्ता द्वारा बटन पर होवर करने के बाद, .button:hover CSS प्रॉपर्टी की सामग्री पढ़ी जाती है, जो बटन की अस्पष्टता को 1 पर सेट करती है। यह हमारे बटन को पूरी तरह से अपारदर्शी (पारदर्शी नहीं) बनाता है।

निष्कर्ष

HTML वेब पेज पर एक बटन की संरचना को परिभाषित करता है। एक बार जब आप एक बटन को परिभाषित कर लेते हैं, तो आप अपनी आवश्यकताओं के आधार पर इसे अनुकूलित करने के लिए सीएसएस का उपयोग कर सकते हैं।

इस ट्यूटोरियल ने उदाहरणों के साथ चर्चा की कि कैसे कई लोकप्रिय सीएसएस गुणों का उपयोग करके बटन को स्टाइल किया जाए। अब आप एक पेशेवर वेब डेवलपर की तरह CSS का उपयोग करके स्टाइलिंग बटन शुरू करने के लिए तैयार हैं!