सीएसएस बटन - त्वरित गाइड
एक वेब-पेज पर एक बटन प्रमुख अभिनेता होता है, जहां उपयोगकर्ता आवश्यक सूचनाओं को चुनने या दर्ज करने के बाद क्लिक करता है और आवश्यक जानकारी प्राप्त करने के लिए विवरण प्रस्तुत करता है। यह ट्यूटोरियल बटन को भयानक बनाने के लिए दस मुख्य सीएसएस पुस्तकालयों पर केंद्रित है, अर्थात् -
bttn.css- bttn.css लाइब्रेरी बटन के लिए सरल शैलियों का एक विशाल संग्रह प्रदान करती है। यह लाइब्रेरी व्यक्तिगत और व्यावसायिक दोनों तरह के उपयोग के लिए पूरी तरह से निःशुल्क है। इन बटन को आसानी से कस्टमाइज किया जा सकता है।
Pushy Buttons - पुष्य बटन पुस्तकालय एक छोटा सीएसएस प्रेसेबल बटन पुस्तकालय है।
btns.css - btns.css बटन लाइब्रेरी CSS बटनों का एक सेट है जो सुचारू बदलाव का उपयोग करता है।
Social Buttons - सामाजिक बटन पुस्तकालय सीएसएस बटन का एक सेट है जो शुद्ध सीएसएस में बनाया गया है और यह बूटस्ट्रैप और फ़ॉन्ट विस्मयकारी पर आधारित है।
Beautons- ब्यूटीसन बटन लाइब्रेरी बटन बनाने के लिए एक सरल सीएसएस टूलकिट है। यह लगातार, मजबूत और ठोस बटन का एक विशाल सेट बनाने के लिए शैलियों, आकारों के संयोजन को लागू करने की अनुमति देता है।
bttn.css लाइब्रेरी बटन के लिए सरल शैलियों का एक विशाल संग्रह प्रदान करती है। यह पुस्तकालय व्यक्तिगत और व्यावसायिक उपयोग के लिए पूरी तरह से निःशुल्क है। इन बटन को आसानी से कस्टमाइज किया जा सकता है।
Bttn.css लोड हो रहा है
Btns.css लाइब्रेरी को लोड करने के लिए, लिंक btns.css पर जाएं और वेब पेज के <head> सेक्शन में निम्न लाइन पेस्ट करें।
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
</head>बटन का उपयोग करना
Html बटन टैग का उपयोग करके एक बटन बनाएं और शैलियों को bttn-slant, bttn-Royal को आकार विनिर्देशक bttn-lg के साथ जोड़ें।
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
</head>
<body>
<button class = "bttn-slant">Submit</button>
</body>
</html>यह निम्नलिखित उत्पादन का उत्पादन करेगा -
आकार को परिभाषित करना
आप सीएसएस का उपयोग करके उसके आकार को परिभाषित करके और वर्ग नाम के साथ उसका उपयोग करके एक बटन के आकार को बढ़ा या घटा सकते हैं, जैसा कि नीचे दिखाया गया है। दिए गए उदाहरण में, हमारे पास चार आकार हैं।
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
</head>
<body>
<button class = "bttn-pill bttn-lg">Large</button>
<button class = "bttn-pill bttn-md">Medium</button>
<button class = "bttn-pill bttn-sm">Small</button>
<button class = "bttn-pill bttn-xs">Extra Small</button>
</body>
</html>यह निम्नलिखित उत्पादन का उत्पादन करेगा -
रंग को परिभाषित करना
आकार की तरह, आप CSS का उपयोग करके बटन के रंग को परिभाषित कर सकते हैं। निम्न उदाहरण दिखाता है कि बटन का रंग कैसे बदलना है।
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
</head>
<body>
<button class = "bttn-pill bttn-lg bttn-primary">Primary</button>
<button class = "bttn-pill bttn-md bttn-warning">Warning</button>
<button class = "bttn-pill bttn-sm bttn-danger">Danger</button>
<button class = "bttn-pill bttn-xs bttn-success">Success</button>
<button class = "bttn-pill bttn-xs bttn-royal">Royal</button>
</body>
</html>यह निम्नलिखित उत्पादन का उत्पादन करेगा -
निम्नलिखित bttn.css में उपलब्ध विभिन्न शैलियाँ हैं
| अनु क्रमांक। | अंदाज | मध्यम आकार | प्राथमिक रंग | डेमो |
|---|---|---|---|---|
| 1 | BTTN-तिरछा | BTTN-md | BTTN-प्राथमिक | |
| 2 | BTTN-एकजुट | BTTN-md | BTTN-प्राथमिक | |
| 3 | BTTN गोली | BTTN-md | BTTN-प्राथमिक | |
| 4 | BTTN फ्लोट | BTTN-md | BTTN-प्राथमिक | |
| 5 | BTTN-सामग्री फ्लैट | BTTN-md | BTTN-प्राथमिक | |
| 6 | BTTN-सामग्री सर्कल | BTTN-md | BTTN-प्राथमिक | |
| 7 | BTTN भरण-चक्र | BTTN-md | BTTN-प्राथमिक | |
| 8 | BTTN-ढाल | BTTN-md | BTTN-प्राथमिक | |
| 9 | BTTN-जेली | BTTN-md | BTTN-प्राथमिक | |
| 10 | BTTN-खिंचाव | BTTN-md | BTTN-प्राथमिक | |
| 1 1 | BTTN-कम से कम | BTTN-md | BTTN-प्राथमिक | |
| 12 | BTTN-bordered | BTTN-md | BTTN-प्राथमिक | |
| 13 | BTTN-सरल | BTTN-md | BTTN-प्राथमिक |
पुसी बटन लाइब्रेरी एक छोटा सीएसएस प्रेसेबल बटन लाइब्रेरी है।
Bttn.css लोड हो रहा है
Pushy-बटन.min.css लाइब्रेरी को लोड करने के लिए, github से सीएसएस डाउनलोड करें और वेब पेज के <head> सेक्शन में निम्न लाइन पेस्ट करें।
<head>
<link rel = "stylesheet" href = "pushy-buttons.min.css">
</head>बटन का उपयोग करना
Html बटन टैग का उपयोग करके एक बटन बनाएं और शैलियों बीटीएन, बीटीएन-ब्लू को आकार निर्दिष्ट बीटीएन-एलजी के साथ जोड़ें।
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
</head>
<body>
<button class = "btn btn--blue">Submit</button>
</body>
</html>यह निम्नलिखित उत्पादन का उत्पादन करेगा -
आकार को परिभाषित करना
आप सीएसएस का उपयोग करके उसके आकार को परिभाषित करके और वर्ग नाम के साथ उसका उपयोग करके एक बटन के आकार को बढ़ा या घटा सकते हैं, जैसा कि नीचे दिखाया गया है। दिए गए उदाहरण में, हमारे पास चार आकार हैं।
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
</head>
<body>
<button class = "btn btn--lg btn--blue">Large</button>
<button class = "btn btn--df btn--blue">Normal</button>
<button class = "btn btn--md btn--blue">Medium</button>
<button class = "btn btn--sm btn--blue">Small</button>
</body>
</html>यह निम्नलिखित उत्पादन का उत्पादन करेगा -
रंग को परिभाषित करना
आकार की तरह, आप CSS का उपयोग करके बटन के रंग को परिभाषित कर सकते हैं। निम्न उदाहरण दिखाता है कि बटन का रंग कैसे बदलना है।
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/pushy-buttons.min.css">
</head>
<body>
<button class = "btn btn--lg btn--red">Large</button>
<button class = "btn btn--df btn--green">Normal</button>
<button class = "btn btn--md btn--blue">Medium</button>
</body>
</html>यह निम्नलिखित उत्पादन का उत्पादन करेगा -
btns.css बटन लाइब्रेरी CSS बटनों का एक सेट है जो सुचारू बदलाव का उपयोग करता है।
Bttn.css लोड हो रहा है
Btns.css लाइब्रेरी को लोड करने के लिए, लिंक btns.css पर जाएं और वेब पेज के <head> सेक्शन में निम्न लाइन पेस्ट करें।
<head>
<link rel = "stylesheet" href = "btns.css">
</head>बटन का उपयोग करना
Html बटन टैग का उपयोग करके एक बटन बनाएं और शैलियों बीटीएन, बीटीएन-ब्लू को आकार निर्दिष्ट बीटीएन-एलजी के साथ जोड़ें।
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/btns.css">
</head>
<body>
<button class = "btn btn-blue">Submit</button>
</body>
</html>यह निम्नलिखित उत्पादन का उत्पादन करेगा -
आकार को परिभाषित करना
आप सीएसएस का उपयोग करके उसके आकार को परिभाषित करके और वर्ग नाम के साथ उसका उपयोग करके एक बटन के आकार को बढ़ा या घटा सकते हैं, जैसा कि नीचे दिखाया गया है। दिए गए उदाहरण में, हमारे पास चार आकार हैं।
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/btns.css">
</head>
<body>
<button class = "btn btn-lg btn-blue">Large</button>
<button class = "btn btn-sm btn-blue">Small</button>
</body>
</html>यह निम्नलिखित उत्पादन का उत्पादन करेगा -
रंग को परिभाषित करना
आकार की तरह, आप CSS का उपयोग करके बटन के रंग को परिभाषित कर सकते हैं। निम्न उदाहरण दिखाता है कि बटन का रंग कैसे बदलना है।
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/btns.css">
</head>
<body>
<button class = "btn btn-lg btn-red">Red</button>
<button class = "btn btn-lg btn-blue">Blue</button>
<button class = "btn btn-lg btn-green">Green</button>
<button class = "btn btn-lg btn-sea">Sea</button>
<button class = "btn btn-lg btn-yellow">Yellow</button>
<button class = "btn btn-lg btn-orange">Orange</button>
<button class = "btn btn-lg btn-purple">Purple</button>
<button class = "btn btn-lg btn-black">Black</button>
<button class = "btn btn-lg btn-cloud">Cloud</button>
<button class = "btn btn-lg btn-grey">Grey</button>
</body>
</html>यह निम्नलिखित उत्पादन का उत्पादन करेगा -
शैली को परिभाषित करना
आकार की तरह, रंग आप सीएसएस का उपयोग करके बटन की शैली को परिभाषित कर सकते हैं। निम्न उदाहरण दिखाता है कि बटन की शैली को कैसे बदलना है।
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/btns.css">
</head>
<body>
<button class = "btn btn-lg btn-blue">Regular</button>
<button class = "btn btn-lg btn-blue btn-round">Round</button>
<button class = "btn btn-lg btn-blue btn-raised">Raised</button>
<button class = "btn btn-blue btn-sm">Small</button>
<button class = "btn btn-lg btn-outline-blue ">Outlined</button>
</body>
</html>यह निम्नलिखित उत्पादन का उत्पादन करेगा -
सामाजिक बटन पुस्तकालय सीएसएस बटन का एक सेट है जो शुद्ध सीएसएस में बनाया गया है और यह बूटस्ट्रैप और फ़ॉन्ट विस्मयकारी पर आधारित है।
सामाजिक बटन लोड हो रहा है
बूटस्ट्रैप-social.css लाइब्रेरी को लोड करने के लिए, github से बूटस्ट्रैप-social.css डाउनलोड करें और वेब पेज के <head> सेक्शन में निम्न लाइन पेस्ट करें।
<head>
<link rel = "stylesheet" href = "bootstrap-social.css">
</head>बटन का उपयोग करना
HTML एंकर टैग का उपयोग करके एक बटन बनाएं और शैलियों बीटीएन, बीटीएन-ब्लॉक को सामाजिक स्पेसियर बीटीएन-सोशल के साथ जोड़ें।
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel = "stylesheet" href = "/css_buttons/bootstrap-social.css">
</head>
<body>
<a class = "btn btn-block btn-social btn-twitter">
<span class = "fa fa-twitter"></span>
Login with Twitter
</a>
</body>
</html>यह निम्नलिखित उत्पादन का उत्पादन करेगा -
आकार को परिभाषित करना
आप सीएसएस का उपयोग करके उसके आकार को परिभाषित करके और वर्ग नाम के साथ उसका उपयोग करके एक बटन के आकार को बढ़ा या घटा सकते हैं, जैसा कि नीचे दिखाया गया है। दिए गए उदाहरण में, हमारे पास चार आकार हैं।
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel = "stylesheet" href = "/css_buttons/bootstrap-social.css">
</head>
<body>
<a class = "btn btn-block btn-lg btn-social btn-twitter">
<span class = "fa fa-twitter"></span>
Login with Twitter
</a>
<a class = "btn btn-block btn-md btn-social btn-twitter">
<span class = "fa fa-twitter"></span>
Login with Twitter
</a>
<a class = "btn btn-block btn-sm btn-social btn-twitter">
<span class = "fa fa-twitter"></span>
Login with Twitter
</a>
<a class = "btn btn-block btn-xs btn-social btn-twitter">
<span class = "fa fa-twitter"></span>
Login with Twitter
</a>
</body>
</html>यह निम्नलिखित उत्पादन का उत्पादन करेगा -
केवल आइकन का उपयोग करना
निम्न उदाहरण दिखाता है कि आइकन केवल बटन कैसे चुनें।
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel = "stylesheet" href = "bootstrap-social.css">
</head>
<body>
<a class = "btn btn-social-icon btn-twitter">
<span class = "fa fa-twitter"></span>
</a>
</body>
</html>यह निम्नलिखित उत्पादन का उत्पादन करेगा -
सोशल बटन में विभिन्न शैलियाँ उपलब्ध हैं।
| अनु क्रमांक। | अंदाज | मध्यम आकार | बटन | आइकन बटन |
|---|---|---|---|---|
| 1 | btn-चहचहाना | btn-md | ट्विटर से लॉगिन करें | |
| 2 | btn-bitbucket | btn-md | Bitbucket के साथ लॉगिन करें | |
| 3 | btn-ड्रॉपबॉक्स | btn-md | Login with Dropbox | |
| 4 | btn-facebook | btn-md | Login with Facebook | |
| 5 | btn-btn-flickr | btn-md | Login with Flickr | |
| 6 | btn-btn-foursquare | btn-md | Login with Foursquare | |
| 7 | btn-btn-github | btn-md | Login with Github | |
| 8 | btn-btn-google | btn-md | Login with Google | |
| 9 | btn-btn-instagram | btn-md | Login with Instagram | |
| 10 | btn-btn-linkedin | btn-md | Login with Linkedin | |
| 11 | btn-btn-microsoft | btn-md | Login with Microsoft | |
| 12 | btn-btn-odnoklassniki | btn-md | Login with Odnoklassniki | |
| 13 | btn-btn-openid | btn-md | Login with Openid | |
| 14 | btn-btn-pinterest | btn-md | Login with Pinterest | |
| 15 | btn-btn-reddit | btn-md | Login with Reddit | |
| 16 | btn-btn-soundcloud | btn-md | Login with Soundcloud | |
| 17 | btn-btn-tumblr | btn-md | Login with Tumblr | |
| 18 | btn-btn-twitter | btn-md | Login with Twitter | |
| 19 | btn-btn-vimeo | btn-md | Login with Vimeo | |
| 20 | btn-btn-vk | btn-md | Login with Vk | |
| 21 | btn-btn-yahoo | btn-md | Login with Yahoo |
Beautons buttons library is a simple CSS toolkit for creating buttons. It allows to apply a combination of styles, sizes to create a huge set of consistent, robust and solid buttons.
Loading the Beautons
To load the Beautons library, download the css from github and paste the following line in the <head> section of the webpage.
<head>
<link rel = "stylesheet" href = "beauton.min.css">
</head>Using the Button
Create a button using html button tag and add styles btn.
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
</head>
<body>
<button class = "btn"<Submit</button>
</body>
</html>It will produce the following output −
Defining the Size
You can increase or decrease the size of an button by defining its size using CSS and using it along with the class name, as shown below. In the given example, we have changes four sizes.
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
</head>
<body>
<button class = "btn btn--small">Small</button> <br/> <br/>
<button class = "btn btn--large btn-blue">Large</button><br/><br/>
<button class = "btn btn--huge">Huge</button><br/><br/>
<button class = "btn btn--full">Full</button><br/><br/>
</body>
</html>It will produce the following output −
Defining the Font Size
You can increase or decrease the size of an button by defining its size using CSS and using it along with the class name, as shown below. In the given example, we have changes four sizes.
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
</head>
<body>
<button class = "btn btn--alpha">Huge</button><br/><br/>
<button class = "btn btn--beta">Large</button><br/><br/>
<button class = "btn btn--gamma">Regular</button><br/><br/>
</body>
</html>It will produce the following output −
Defining the Functional Buttons
The following example shows various functional button.
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
</head>
<body>
<button class = "btn btn--positive">Positive</button> <br/> <br/>
<button class = "btn btn--negative">Negative</button><br/><br/>
<button class = "btn btn--inactive">Disabled</button><br/><br/>
<button class = "btn btn--soft">Rounded</button><br/><br/>
<button class = "btn btn--hard">Hard</button><br/><br/>
</body>
</html>It will produce the following output −
Combining the Styles
The following example shows how to combines the styles of the buttons.
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
</head>
<body>
<button class = "btn btn--large btn--positive">Button</button> <br/><br/>
<button class = "btn btn--positive btn--alpha btn--small">Button</button><br/><br/>
<button class = "btn btn--negative btn--full btn--soft">Button</button><br/><br/>
<p>A <button class = "btn btn--natural">button</button> in a paragraph.</p><br/><br/>
</body>
</html>It will produce the following output −
A in a paragraph.