Affichage bouton CSS dans Outlook
J'ai créé un CSS gradient bouton avec Bouton Maker mais il ne s'affiche pas correctement dans Outlook compte tenu de leur CSS restrictions. Je veux donc plus simple bouton affiche dans Outlook, mais je n'ai pas réussi à remplir le fond entre la frontière et le texte du lien (5px rembourrage autour du texte doit être rempli). J'ai précisé background-color:#65a9d7 à la fois dans le span style et le style de lien.
Mon problème:mon bouton dans outlook
Mon code du bouton:
<span class="buttoncustom" style="background-color:#65a9d7"><a href="http://www.google.com" target="_blank" title="Button" style="text-decoration:none;color:#FFFFFF; padding:5px;background-color:#65a9d7"><strong>> My Button</strong></a></span>Ma feuille de style:
<style type="text/css">
.buttoncustom {
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
background: -moz-linear-gradient(top, #3e779d, #65a9d7);
background: -ms-linear-gradient(top, #3e779d, #65a9d7);
background: -o-linear-gradient(top, #3e779d, #65a9d7);
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 14px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
mso-line-height-rule: exactly;
}
.buttoncustom:hover {
border-top-color: #006699;
background: #006699;
color: #ccc;
}
.buttoncustom:active {
border-top-color: #1b435e;
background: #1b435e;
}
</style>J'ai été jouer avec le code pour les âges en vain donc je vous remercie de votre aide énormément!
Vous devez vous connecter pour publier un commentaire.
Voir le suivi de la Campagne de l'outil pour la fabrication des balles des boutons dans des e-mails. Utilise VML pour Outlook avec un repli de l'affichage lorsque les images sont désactivées:
des boutons.cm
Comme d'autres réponses suggèrent, l'aide pour quoi que ce soit vraiment universelle dans Outlook 2007, 2010 et 2013 est assez terrible. Le principal problème dans le cas de ce bouton, c'est que la marge de propriété n'est pas prise en charge dans ces versions d'Outlook (ils l'utilisation de MS Word comme moteur de rendu, beurk!) Décisif qui explique cette et la solution très bien.
J'ai réussi à créer un HTML basée sur la table de bouton qui fonctionne dans presque tous les principaux clients de messagerie.
Voici le code HTML pour votre référence:
Espère que c'est toujours utile de vous ou de toute googleurs qui arrive par.
Je trouve que l'utilisation d'une bordure de la même couleur que l'arrière-plan du bouton est une solution fiable. Ainsi, au lieu de cela:
Essayez ceci:
Décisif qui a un super blog sur les différentes options et de soutien pour cela. Je l'utilise généralement Padding + Border option. Je trouve que cela fonctionne dans tous les principaux clients (à l'exception de lotus notes).
https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design
Remarque: lors du test vous avez besoin d'un url dans le lien, si vous avez juste un hachage là il l'habitude de travailler dans outlook.com parce qu'ils démontent le lien!
Avez-vous essayé de style de l'ancre directement?
Veuillez utiliser mentionnées ci-dessous de code HTML, cela fonctionne parfaitement bien dans outlook.