email => बुलेटप्रूफ बटन

परिचय

बटन ईमेल विकास के सबसे निराशाजनक भागों में से एक हो सकते हैं, लेकिन वे छवियों के बजाय कोड के साथ बनाए जा सकते हैं और अभी भी सभी प्रमुख ईमेल क्लाइंट में अच्छी तरह से प्रदर्शित होते हैं। एचटीएमएल / सीएसएस में निर्मित होने पर, एक बटन सभी ईमेल क्लाइंट में प्रदर्शित करेगा, यहां तक कि छवियों के साथ भी। प्रत्येक बटन की सामग्री और शैली दोनों को HTML / CSS टेम्पलेट में जल्दी से संपादित किया जा सकता है।

टिप्पणियों

मीडिया क्वेरी के साथ प्रगतिशील वृद्धि

मीडिया के प्रश्नों का समर्थन करने वाले ग्राहकों के लिए, ऊपर दिए गए किसी भी उदाहरण से बटन को उत्तरोत्तर बढ़ाया जा सकता है।

उदाहरण के लिए। @media screen and (-webkit-min-device-pixel-ratio: 0) { /* Insert -webkit-targeted CSS here */ }

आउटलुक में अधिक क्षैतिज पैडिंग जोड़ें

बटन लिंक के प्रत्येक तरफ सशर्त रूप से गैर-ब्रेकिंग स्पेस जोड़ने से आउटलुक के लिए क्षैतिज पैडिंग बढ़ सकती है। सीमा-आधारित बटन के लिए विशेष रूप से उपयोगी है।

`<!--[if mso]>&nbsp;&nbsp;&nbsp;<![endif]-->Link Text<!--[if mso]>&nbsp;&nbsp;&nbsp;<![endif]-->`

बटन। cm बटन

अभियान मॉनिटर ने एक निफ्टी उपकरण बनाया जो HTML ईमेल में बटन के लिए कोड उत्पन्न करता है। यह अधिकांश प्रमुख ईमेल क्लाइंट्स में बैकग्राउंड इमेज या पैटर्न प्रदर्शित करने के लिए एक cominbation os CSS और VML (Microsoft Outlook के लिए) का उपयोग करता है।

<div><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.stackoverflow.com" style="height:38px;v-text-anchor:middle;width:200px;" arcsize="8%" strokecolor="#7ea613" fill="t">
    <v:fill type="tile" src=""https://imgur.com/clZqdfM.gif"" color="#99c739" />
    <w:anchorlock/>
    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Stack Overflow</center>
  </v:roundrect>
<![endif]--><a href="http://www.stackoverflow.com"
style="background-color:#99c739;background-image:url("https://imgur.com/clZqdfM.gif");border:1px solid #7ea613;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:38px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">Stack Overflow</a></div>

कुछ इस तरह प्रदर्शित करेगा:

नोट : चूंकि आउटलुक में क्लिक करने योग्य हाइपरलिंक एक VML टैग के अंदर है, इसलिए कुछ ईमेल सेवा प्रदाताओं को इस लिंक पर क्लिक को ट्रैक करने में परेशानी होती है।

<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.stackoverflow.com" style="height:38px;v-text-anchor:middle;width:200px;" arcsize="8%" strokecolor="#7ea613" fill="t">

पैडिंग-आधारित बटन

यह तकनीक बटन की संरचना करने के लिए टेबल सेल स्तर पर पैडिंग पर निर्भर करती है, और बटन को स्टाइल करने के लिए HTML विशेषताओं और CSS दोनों को। कोई VML मतलब सरल कोड नहीं है, लेकिन आउटलुक में कोई पृष्ठभूमि चित्र नहीं है।

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td bgcolor="#0095FF" style="padding: 12px 18px 12px 18px; -webkit-border-radius:3px; border-radius:3px" align="center"><a href="http://www.stackoverflow.com" target="_blank" style="font-size: 14px; font-family: sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; display: inline-block;">Stack Overflow</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

पैडिंग-आधारित-बटन का दोष यह है कि बटन का पूरा क्षेत्र क्लिक करने योग्य नहीं है, केवल तालिका सेल के भीतर लिंक है।

सीमा-आधारित बटन

यह तकनीक बटन के CTA के निर्माण के लिए लिंक से मोटी सीमाओं को जोड़ने पर निर्भर करती है। सीमाओं का उपयोग करना ईमेल ग्राहकों द्वारा सार्वभौमिक रूप से समझा जाता है, लेकिन बटन उपस्थिति ठोस रंग।

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td bgcolor="#0095FF" style="padding: 12px 18px 12px 18px; -webkit-border-radius:3px; border-radius:3px" align="center"><a href="http://www.stackoverflow.com" target="_blank" style="font-size: 14px; font-family: sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; display: inline-block;">Stack Overflow</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

लिंक टैग एक ब्लॉक-स्तरीय तत्व के रूप में सेट किया गया है और उस सीमा का उपयोग पैडिंग प्रदान करने के लिए किया जाता है, इसलिए संपूर्ण बटन पुराने डेस्कटॉप क्लाइंट में भी होवरेबल + क्लिक करने योग्य होता है।

बॉर्डर-आधारित-बटन का दोष यह है कि आउटलुक एक छोटी राशि से सीमाओं के आकार को कम करेगा और, जैसा कि ऊपर उल्लेख किया गया है, पृष्ठभूमि छवियां समर्थित नहीं हैं।

पैडिंग + बॉर्डर-आधारित बटन

यह तकनीक सीमा-आधारित और पैडिंग-आधारित बटनों के संयोजन का उपयोग करती है, लिंक को दोनों पैडिंग के साथ और कम से कम एक ठोस 1px सीमा के साथ स्टाइल करती है। इस उदाहरण के बजाय पृष्ठभूमि रंग को लागू करने की आवश्यकता है क्योंकि आउटलुक टैग पर क्षैतिज पैडिंग पहचानता है (क्योंकि यह ब्लॉक स्तर का टैग नहीं है)।

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td align="center" style="-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" bgcolor="#0095FF"><a href="https://www.stackoverflow.com" target="_blank" style="font-size: 14px; font-family: sans-serif; color: #ffffff; text-decoration: none; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 12px 18px; border: 1px solid #0095FF; display: inline-block;">Stack Overflow</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

पैडिंग + बॉर्डर-आधारित-बटन का दोष यह है कि यह स्टाइल को <td> और <a> टैग के बीच अलग करता है, इसलिए इसे बनाए रखना मुश्किल हो सकता है। लेकिन केवल एक बटन का उपयोग किया जाता है, विशिष्ट आयामों की आवश्यकता नहीं होती है, और पृष्ठभूमि छवियों का समर्थन किया जा सकता है।

स्पेसर के साथ बुलेट प्रूफ बटन

यह बटन एसिड पर ईमेल द्वारा इस उदाहरण से निकला है। यह पूरी तरह से कोड-आधारित है, इसलिए यह डाउनलोड की गई छवियों के बिना प्रदर्शित होगा, और पूरा बटन hoverable + clickable है।

इसके अतिरिक्त, इस उदाहरण में यह नियंत्रित करने के लिए स्पेसर भी शामिल हैं कि बटन के पहले और बाद में कितना ऊर्ध्वाधर स्थान दिखाई देता है।

<table width="100%">
    <tr>
      <td>
        <!-- Top Spacer : BEGIN -->
        <table border="0" cellpadding="0" cellspacing="0"> 
          <tr>
            <td height="20" width="100%" style="font-size: 20px; line-height: 20px;">
            &nbsp;
            </td>
          </tr>
        </table>
        <!-- Top Spacer : END -->
        <!-- Button : BEGIN -->
        <table border="0" align="left" cellpadding="0" cellspacing="0">
          <tbody>
          <tr>
            <td align="left">
              <table border="0" cellpadding="0" cellspacing="0" width="150">
                <tr>
                  <td align="center" bgcolor="#0077CC" width="150" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;">
                    <a href="http://www.stackoverflow.com" style="padding: 10px; width:150px; display: block;text-decoration: none; border:0;text-align: center; font-weight: bold; font-size: 14px; font-family: sans-serif; color: #ffffff; background: #0095FF;border: 1px solid #0077CC; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; line-height:17px;" class="button_link">Stack Overflow</a>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          </tbody>
        </table>
        <!-- Button : END -->
        <!-- Bottom Spacer : BEGIN -->
        <table border="0" cellpadding="0" cellspacing="0"> 
          <tr>
            <td height="20" width="100%" style="font-size: 20px; line-height: 20px;">
            &nbsp;
            </td>
          </tr>
        </table>
        <!-- Bottom Spacer : END -->
      </td>
    </tr>
  </table>

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow

email
बुलेटप्रूफ बटन

खोज…