How to add Gradient Hover Effect Buttons in Blogger
नमस्कार दर्शकों, मेरी साइट “drgp82” में आपका स्वागत है। मुझे आशा है कि आप सभी अच्छे होंगे। तो आज मैं आपके साथ कुछ Gradient Hover Effects Button Share करूँगा। यह बटन आपकी साइट को आकर्षक बनाता है और आप इस बटन का उपयोग ब्लॉगर में कर सकते हैं।
What is Gradient Hover Effect ?
Wग्रैडिएंट होवर को जब Blogger में लगाया जाता है, तो एक बटन के शानदार रंग आकर्षक प्रतीत होते हैं। कुल मिलाकर, ग्रेडिएंट बटनों का संग्रह आकर्षक और साफ-सुथरा है। आपको बस अपनी पसंद का डिज़ाइन चुनना है और उसे अपने में शामिल करना है।
यहां ग्रेडिएंट बटनों की एक सूची दी गई है, जिसका प्रयोग कर Blogger पृष्ठभूमि का रंग बदल जाता है। होवर अवस्था में, आप पृष्ठभूमि परिवर्तन की दिशा बदल सकते हैं। उसके बाद बटन की पृष्ठभूमि-रंग दिशा को अपडेट करना न भूलें, और पूरी पोस्ट पढ़ें।
ब्लॉगर में ग्रेडिएंट होवर इफ़ेक्ट बटन जोड़ने के चरण
स्टेप 1 :- ब्लॉगर डैशबोर्ड में थीम पर जाएं
चरण 2 :- अनुकूलित बटन के आगे वाले तीर पर क्लिक करें
चरण 3 :- HTML संपादित करें पर क्लिक करें
स्टेप 4 :- कोड सर्च करें ]]></b:skin> और इसके ठीक ऊपर निम्न CSS पेस्ट करें।
.btn-hover { width: 200px; font-size: 16px; font-weight: 600; color: #fff; cursor: pointer; margin: 20px; height: 55px; text-align:center; border: none; background-size: 300% 100%; border-radius: 50px; moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out;}.btn-hover:hover { background-position: 100% 0; moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out;}.btn-hover:focus { outline: none;}.btn-hover.color-1 { background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673); box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);}.btn-hover.color-2 { background-image: linear-gradient(to right, #f5ce62, #e43603, #fa7199, #e85a19); box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75);}.btn-hover.color-3 { background-image: linear-gradient(to right, #667eea, #764ba2, #6B8DD6, #8E37D7); box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75);}.btn-hover.color-4 { background-image: linear-gradient(to right, #fc6076, #ff9a44, #ef9d43, #e75516); box-shadow: 0 4px 15px 0 rgba(252, 104, 110, 0.75);}.btn-hover.color-5 { background-image: linear-gradient(to right, #0ba360, #3cba92, #30dd8a, #2bb673); box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.75);}.btn-hover.color-6 { background-image: linear-gradient(to right, #009245, #FCEE21, #00A8C5, #D9E021); box-shadow: 0 4px 15px 0 rgba(83, 176, 57, 0.75);}.btn-hover.color-7 { background-image: linear-gradient(to right, #6253e1, #852D91, #A3A1FF, #F24645); box-shadow: 0 4px 15px 0 rgba(126, 52, 161, 0.75);}.btn-hover.color-8 { background-image: linear-gradient(to right, #29323c, #485563, #2b5876, #4e4376); box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);}.btn-hover.color-9 { background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed); box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);}.btn-hover.color-10 { background-image: linear-gradient(to right, #ed6ea0, #ec8c69, #f7186a , #FBB03B); box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);}.btn-hover.color-11 { background-image: linear-gradient(to right, #eb3941, #f15e64, #e14e53, #e2373f); box-shadow: 0 5px 15px rgba(242, 97, 103, .4);}
Step 5 :- अब बटन के कोड को जहां लगाना हो उस जगह कॉपी करके ब्लॉगर पोस्ट में HTML व्यू में पेस्ट कर दें।
<button class="btn-hover color-1" onclick="window.open('#')">Button</button> <button class="btn-hover color-2" onclick="window.open('#')">Button</button> <button class="btn-hover color-3" onclick="window.open('#')">Button</button> <button class="btn-hover color-4" onclick="window.open('#')">Button</button> <button class="custom-btn btn-5" onclick="window.open('#')"><span>Read More</span></button> <button class="btn-hover color-6" onclick="window.open('#')">Button</button> <button class="btn-hover color-7" onclick="window.open('#')">Button</button> <button class="btn-hover color-8" onclick="window.open('#')">Button</button> <button class="btn-hover color-9" onclick="window.open('#')">Button</button> <button class="btn-hover color-10" onclick="window.open('#')">Button</button> <button class="btn-hover color-11" onclick="window.open('#')">Button</button> निष्कर्ष
इस पोस्ट में मैंने आपको “Blogger में Gradient Hover Effect Buttons कैसे Add करें” शेयर किया है। मुझे उम्मीद है कि आपको मेरी पोस्ट पसंद आई होगी। अधिक नई पोस्ट के लिए कृपया हमारी साइट पर प्रतिदिन विजिट करें। हमारी साइट पर आने के लिए धन्यवाद।
