Create a neon button/how to create a neon button with html and css
Create a Neon Button with HTML and CSS
यहां पर हमने एचटीएमएल और सीएसएस का उपयोग करके एक नियॉन बटन बनाया है। इस बटन में हमने माउस होवर इफेक्ट्स लगाया है। नीचे दिए गए बटन पर जब भी आप टच करते हो या माउस होवर करते हो तो बटन का रंग बदल जाता है और बटन चमकने लगता है।
HTML Code:-
Code download karne ke liye Download button per click karen
- <!DOCTYPE html>: यह दस्तावेज़ के प्रकार को बताता है कि यह HTML5 है।
- <html lang="en">: यह HTML दस्तावेज़ की शुरुआत है और यह बताता है कि भाषा अंग्रेजी (en) है।
-
<head>: यह वेब पेज के मेटाडेटा (metadata) को रखने के लिए है।
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: यह वेब पेज को मोबाइल डिवाइस पर ठीक से दिखाने के लिए है।
- <title>Document</title>: यह वेब पेज का टाइटल है, जो ब्राउज़र के टैब पर दिखाई देता है।
- <body>: यह वेब पेज का मुख्य कंटेंट है।
- <button class="btn">button</button>: यह एक बटन बनाता है जिसमें "button" टेक्स्ट है और यह btn क्लास के स्टाइल को फॉलो करता है।
CSS Code:-
Code download karne ke liye Download button per click karen
-
body: यह बॉडी एलिमेंट के लिए स्टाइल है।
-
display: flex;: यह बॉडी को एक फ्लेक्स कंटेनर बनाता है।
- justify-content: center;: यह बॉडी के कंटेंट को क्षैतिज (horizontal) रूप से केंद्रित करता है।
- align-items: center;: यह बॉडी के कंटेंट को लंबवत (vertical) रूप से केंद्रित करता है।
- height: 100vh;: यह बॉडी की ऊंचाई को पूरी स्क्रीन की ऊंचाई (viewport height) के बराबर करता है।
- background: #333;: यह बॉडी का बैकग्राउंड कलर डार्क ग्रे (#333) सेट करता है।
-
display: flex;: यह बॉडी को एक फ्लेक्स कंटेनर बनाता है।
-
.btn: यह बटन के लिए स्टाइल है।
- font-size: 20px;: बटन के टेक्स्ट का साइज़ 20px सेट करता है।
- padding: 15px 40px;: बटन के अंदर की स्पेसिंग (padding) सेट करता है।
- border: 2px solid deepskyblue;: बटन के चारों ओर 2px की गहरे आसमानी रंग (deepskyblue) की बॉर्डर सेट करता है।
- text-transform: uppercase;: बटन के टेक्स्ट को अपरकेस (uppercase) में बदलता है।
- background: transparent;: बटन का बैकग्राउंड पारदर्शी (transparent) सेट करता है।
- cursor: pointer;: जब उपयोगकर्ता बटन पर होवर करता है तो कर्सर पॉइंटर (pointer) में बदल जाता है।
- position: relative;: बटन की पोजीशन रिलेटिव (relative) सेट करता है।
- color: deepskyblue;: बटन के टेक्स्ट का रंग गहरा आसमानी (deepskyblue) सेट करता है।
- letter-spacing: 2px;: बटन के टेक्स्ट के अक्षरों के बीच की दूरी 2px सेट करता है।
- transition: 0.3s ease-in-out;: बटन पर होने वाले परिवर्तन (जैसे होवर) को 0.3 सेकंड में धीरे-धीरे (ease-in-out) करता है।
- box-shadow: 0 0 10px deepskyblue, 0 0 20px deepskyblue;: बटन के चारों ओर गहरे आसमानी रंग की छाया (shadow) डालता है।
-
.btn:hover: यह बटन पर होवर करने पर स्टाइल बदलता है।
- color: white;: बटन के टेक्स्ट का रंग सफेद (white) हो जाता है।
- background: deepskyblue;: बटन का बैकग्राउंड गहरा आसमानी (deepskyblue) हो जाता है।
- box-shadow: बटन के चारों ओर गहरे आसमानी रंग की छाया (shadow) बढ़ जाती है।
Comments
Post a Comment