How to create buy now button like amazon – अमेज़न की तरह buy now बटन कैसे design करें ?

यदि आप ऐसा कोई कोई आर्टिकल खोज रहे है जो आपको यह बताये की आप Amazon की तरह buy now बटन कैसे डिजाईन करें तो हम आपको बताना चाहेंगे आप बिलकुल सही आर्टिकल पर आ गए है क्युकी इस आर्टिकल में हम आपको Amazon की तरह buy now और check on amazon बटन डिजाईन करने के बारे में बताएँगे हम उमीद करते है आपको हमारा आज का आर्टिकल पसंद आएगा तो चलिए ज्यादा समय लगाते हुए शुरू करते है आज का आर्टिकल How to create buy now button like amazon – अमेज़न की तरह buy now बटन कैसे design करें ?

So let’ begin,

अमेज़न की तरह buy now बटन कैसे design करें (How to create buy now button like amazon) ?

हम आपको पहले ही अपने पहले वाले आर्टिकल में font awesome के icons को कैसे वेबसाइट में ऐड करें के बारे में बता चुके है अगर आपने उस आर्टिकल को नही पढ़ा है तो पहले उस आर्टिकल को पढ़े How to add font awesome icons in any kind of website like wordress, blogspot etc. हम आपको इस आर्टिकल को पढने को जरुर कहेंगे क्युकी हमने इस आर्टिकल में fontawesome के icons वेबसाइट में कैसे ऐड करें स्टेप by स्टेप बताया है क्युकी आज के आर्टिकल में हम fontawesome के icons में से amazon logon के icon को भी इस्तेमाल करेंगे इसलिए आप How to add font awesome icons लेख (article) जरुर पढ़े तो चलिए अपने इस आर्टिकल में आगे बढ़ते है

अगर आपने fontawesome वाले आर्टिकल को complete पढ़ लिया है तो आपको सिम्पली अब सिर्फ निचे दिए css कोड को अपने वेबसाइट में ऐड करना है और आपके वेबसाइट का buy now और check on amazon बटन रेडी हो चूका होगा आप preview देख सकते है

अब निचे गए css code को कॉपी करें और अपने वेबसाइट के stylesheet में पेस्ट करें

.amazonbtn{
/* color: #ffffff; */
/* background-color: #0000f7; */
border-color: #9c7e31 #90742d;
background: #f0c14b;
background: linear-gradient( 
180deg,#f7dfa5,#f0c14b) repeat scroll 0 0 transparent;
color: #111!important;
border-radius: 3px;
box-shadow: inset 0 1px 0 hsl(0deg 0% 100% / 40%);
box-sizing: border-box;
display: inline-block;
margin: 0;
padding: 7px 12px 6px;
cursor: pointer;
font-size: 18px;
font-weight: 800;
line-height: 19px;
background-color: #fff;
text-align: center;
text-decoration: none!important;
/* border: 1px solid #ccc!important; */
color: #333!important;
}

@media (max-width: 544px) {
.amazonbtn{
font-size: 14px;
}
}

.fa-amazon:before {
padding: 0px 8px 0px 0px;
font-size:14px;
}

@media (max-width: 544px) {
.fa-amazon:before {
font-size: 13px;
}
}

अब आप अपने वेबसाइट में कही भी बटन क्रिएट कर सकते है अब आपको बटन के क्लास के लिए .amazonbtn को इस्तेमाल करना होगा जब ही यह css code work करेगा आपको बटन क्रिएट करते समय class .amazonbtn जरुर ऐड करनी है तभी बटन अमेज़न की तरह दिखेगा

Conclusion

हम आशा करते है आपको आज का आर्टिकल How to create buy now button like amazon – अमेज़न की तरह buy now बटन कैसे design करें ? लेख पसंद आया होगा अगर आपको आज का आर्टिकल पसंद आया तो इस आर्टिकल को सोशल मीडिया पर शेयर करना ने भूले और यदि आपको कोई सवाल हो तो आप हमसे कमेंट बॉक्स में पूछ सकते है

और आर्टिकल पढ़े

Leave a Comment