Dazzling Glittering Animated CSS Buttons
जब हम अपनी साइट पर कोई लिंक बटन बनाकर देते/दिखाते हैं तो उसका मज़ा ही कुछ और होता है क्योंकि यह लम्बे लिंक को भी छोटे से शीर्षक से बदल देता है। यही इसकी परम सुंदरता है। इस बटन को CSS के द्वारा और भी खूबसूरत बनाया जा सकता है। जिससे आपके ब्लॉग पर दिये जाने वाले लिंक के बारे में पाठक की रोचकता और भी ज़्यादा बढ़ती है और साथ ही साथ आपके ब्लॉग पर पाठक का मन रमा रहता है।इसलिए मैं आपके सामने पेश कर रहा हूँ सितारों की झलक देते रंगीन बटन(DAZZLING ANIMATED CSS BUTTONS) जिनका सजीव उदाहरण मैंने नीचे दे दिया है। यह नीले, हरे, नारंगी और स्लेटी रंग में उपलब्ध हैं। इनके आकार छोटे, मध्यम और बड़े हो सकते हैं। साथ ही आकृतियाँ वर्गाकार और गोलाकार हो सकती हैं और इनका ब्लॉग में इंस्टालेशन और प्रयोग बेहद सरल है। बस जैसा नीचे ट्यूटोरियल (tutorial) में बताया गया है आप उन चरणों को अच्छे-से समझकर पूरा कर लें।
सितारों की तरह झिलमिलाते रंगीन बटनों का उदाहरण | EXAMPLE OF DAZZLING ANIMATED CSS BUTTONS
इन झिलमिलाते ख़ूबसूरत बटनों को ब्लॉग में कैसे इंस्टॉल करें? | INSTALLING DAZZLING ANIMATED CSS BUTTONS
सबसे पहले अपने ब्लॉग के डैशबोर्ड में जाकर टेम्प्लेट में नीचे दिया गया CSS कोड जोड़ना होगा। इसके लिए अपने टेम्पलेट का HTML एडिट करना पड़ेगा।
1. ब्लॉगर डैशबोर्ड › Template टैब › Edit HTML › Proceed (यह चरण पूरे करें) । अधिक जानकारी के लिए यहाँ क्लिक करें।
2. अब ]]></b:skin> के ठीक ऊपर नीचे दिया गया CSS कोड पेस्ट कर दें।
DAZZLING ANIMATED CSS BUTTONS का CSS कोड:
.button{font:15px Calibri,Arial,sans-serif; text-shadow:1px 1px 0 rgba(255,255,255,0.4); text-decoration:none !important; white-space:nowrap; display:inline-block; vertical-align:baseline; position:relative; cursor:pointer; padding:10px 20px; background-repeat:no-repeat; background-position:bottom left; background-image:url('http://techprevue.googlecode.com/files/button_bg.png'); background-position:bottom left,top right,0 0,0 0; background-clip:border-box; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; -moz-box-shadow:0 0 1px #fff inset; -webkit-box-shadow:0 0 1px #fff inset; box-shadow:0 0 1px #fff inset; -webkit-transition:background-position 1s; -moz-transition:background-position 1s; transition:background-position 1s}
.button:hover{background-position:top left; background-position:top left,bottom right,0 0,0 0}
.button:active{bottom:-1px}
.button.big{font-size:30px}
.button.medium{font-size:18px}
.button.small{font-size:13px}
.button.rounded{-moz-border-radius:4em; -webkit-border-radius:4em; border-radius:4em}
.blue.button{color:#0f4b6d !important; border:1px solid #84acc3 !important; background-color:#48b5f2; background-image:url('http://techprevue.googlecode.com/files/button_bg.png'),url('http://techprevue.googlecode.com/files/button_bg.png'),-moz-radial-gradient(center bottom,circle,rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),-moz-linear-gradient(#4fbbf7,#3faeeb); background-image:url('http://techprevue.googlecode.com/files/button_bg.png'),url('http://techprevue.googlecode.com/files/button_bg.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(89,208,244,1)),to(rgba(89,208,244,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#4fbbf7),to(#3faeeb))}
.blue.button:hover{background-color:#63c7fe; background-image:url('http://techprevue.googlecode.com/files/button_bg.png'),url('http://techprevue.googlecode.com/files/button_bg.png'),-moz-radial-gradient(center bottom,circle,rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),-moz-linear-gradient(#63c7fe,#58bef7); background-image:url('http://techprevue.googlecode.com/files/button_bg.png'),url('http://techprevue.googlecode.com/files/button_bg.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(109,217,250,1)),to(rgba(109,217,250,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#63c7fe),to(#58bef7))}
.green.button{color:#345903 !important; border:1px solid #96a37b !important; background-color:#79be1e; background-image:url('http://techprevue.googlecode.com/files/button_bg.png'),url('http://techprevue.googlecode.com/files/button_bg.png'),-moz-radial-gradient(center bottom,circle,rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27,#74b317); background-image:url('http://techprevue.googlecode.com/files/button_bg.png'),url('http://techprevue.googlecode.com/files/button_bg.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(162,211,30,1)),to(rgba(162,211,30,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#82cc27),to(#74b317))}
.green.button:hover{background-color:#89d228; background-image:url('http://techprevue.googlecode.com/files/button_bg.png'),url('http://techprevue.googlecode.com/files/button_bg.png'),-moz-radial-gradient(center bottom,circle,rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31,#7fc01e); background-image:url('http://techprevue.googlecode.com/files/button_bg.png'),url('http://techprevue.googlecode.com/files/button_bg.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(183,229,45,1)),to(rgba(183,229,45,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#90de31),to(#7fc01e))}
.orange.button{color:#693e0a !important; border:1px solid #bea280 !important; background-color:#e38d27; background-image:url('http://techprevue.googlecode.com/files/button_bg.png'),url('http://techprevue.googlecode.com/files/button_bg.png'),-moz-radial-gradient(center bottom,circle,rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f,#d4821f); background-image:url('http://techprevue.googlecode.com/files/button_bg.png'),url('http://techprevue.googlecode.com/files/button_bg.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(232,189,45,1)),to(rgba(232,189,45,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#f1982f),to(#d4821f))}
.orange.button:hover{background-color:#ec9732; background-image:url('http://techprevue.googlecode.com/files/button_bg.png'),url('http://techprevue.googlecode.com/files/button_bg.png'),-moz-radial-gradient(center bottom,circle,rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746,#e18f2b); background-image:url('http://techprevue.googlecode.com/files/button_bg.png'),url('http://techprevue.googlecode.com/files/button_bg.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(241,192,52,1)),to(rgba(241,192,52,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#f9a746),to(#e18f2b))}
.gray.button{color:#525252 !important; border:1px solid #a5a5a5 !important; background-color:#a9adb1; background-image:url('http://techprevue.googlecode.com/files/button_bg.png'),url('http://techprevue.googlecode.com/files/button_bg.png'),-moz-radial-gradient(center bottom,circle,rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca,#92989c); background-image:url('http://techprevue.googlecode.com/files/button_bg.png'),url('http://techprevue.googlecode.com/files/button_bg.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(197,199,202,1)),to(rgba(197,199,202,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#c5c7ca),to(#92989c))}
.gray.button:hover{background-color:#b6bbc0; background-image:url('http://techprevue.googlecode.com/files/button_bg.png'),url('http://techprevue.googlecode.com/files/button_bg.png'),-moz-radial-gradient(center bottom,circle,rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6,#9fa5a9); background-image:url('http://techprevue.googlecode.com/files/button_bg.png'),url('http://techprevue.googlecode.com/files/button_bg.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(202,205,208,1)),to(rgba(202,205,208,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#d1d3d6),to(#9fa5a9))}
इन बटन को अपने ब्लॉग/ ब्लॉग पोस्ट में कैसे प्रयोग करें? । USING DAZZLING ANIMATED CSS BUTTONS
यहाँ नीचे बटन के प्रकार के साथ उसके नीचे उसे प्रयोग करने का कोड दिया गया है।
नीला बड़ा बटन
<a class="button big blue" href="#Link">Big Button</a>
हरा बड़ा बटन
<a class="button big green" href="#Link">Big Button</a>
नारंगी बड़ा बटन
<a class="button big orange" href="#Link">Big Button</a>
स्लेटी बड़ा बटन
<a class="button big gray" href="#Link">Big Button</a>
नीला मध्यम आकार बटन
<a class="button blue medium" href="#Link">Medium Button</a>
हरा मध्यम आकार बटन
<a class="button green medium" href="#Link">Medium Button</a>
नारंगी मध्यम आकार बटन
<a class="button orange medium" href="#Link">Medium Button</a>
स्लेटी मध्यम आकार बटन
<a class="button gray medium" href="#Link">Medium Button</a>
नीला छोटा बटन
<a class="button small blue" href="#Link">Small Button</a>
हरा छोटा बटन
<a class="button small green" href="#Link">Small Button</a>
नारंगी छोटा बटन
<a class="button small orange" href="#Link">Small Button</a>
स्लेटी छोटा बटन
<a class="button small gray" href="#Link">Small Button</a>
गोलाकार नीला छोटा बटन
<a class="button small blue rounded" href="#Link">Rounded</a>
गोलाकार हरा छोटा बटन
<a class="button small green rounded" href="#Link">Rounded</a>
विशेष:
उपरोक्त किसी भी बटन कोड के दो प्रमुख भाग हैं जिनसे बटन का रंग और आकार दिखता है। उदाहरण स्वरूप हरे रंग के छोटे बटन का कोड को लेते हैं...हरा छोटा बटन
इस बटन का कोड है:<a class="button small green" href="#Link">हरा छोटा बटन</a>1. इस कोड में class="button small green" का मतलब है, बटन छोटे आकार और हरे रंग का है।
2. इस कोड में #Link के स्थान पर आप कोई भी आंतरिक(Internal) या बाह्य(External) लिंक जोड़ सकते हैं।
3. इस कोड में हरा छोटा बटन बटन का शीर्षक है जिसे आप अपने अनुसार बदल सकते हैं।
आशा करता हूँ कि आपको यह DAZZLING ANIMATED CSS BUTTON पसंद आया होगा, यदि हाँ तो हमारा फेसबुक पेज पसंद करना न भूलें।
Post a Comment