1. Accueil
  2. Cakemail Classique Admin
  3. Bibliothèque d'images
  4. Comment créer un bouton modifiable avec des bordures arrondies pour un gabarit?

Comment créer un bouton modifiable avec des bordures arrondies pour un gabarit?

Les bordures arrondies sont prises en charge sur Apple, iPhone et iPad Mail, Thunderbird, Yahoo !, Mail, le client Android par défaut et Gmail (dans les navigateurs autres qu’Internet Explorer).

Étape 1: Configurer un conteneur modifiable:

<div class='contentEditableContainer contentTextEditable'>
<div class='contentEditable'>
</div>
</div>

Étape 2: Paragraphes et ancres

Utilisez un paragraphe pour configurer l’ancrage de l’URL pour plus de maniabilité lorsque vous placez votre bouton <a> dans le modèle:

<p>
<a>
</a>
</p>

Étape 3: Style de paragraphe

  • Rembourrage: pour donner de l’espace entre le contenu et le bouton
  • Alignement du texte: Centré dans le conteneur.
<p style=’width:200px; text-align:center; padding:12px’>
<a>
</a>
</p>

Étape 4: Style d’ancrage

  • Affichage: Il agit comme un élément de texte et un élément de boîte
  • Couleur de fond: Noir
  • Couleur du texte: Blanc
  • Coins: Arrondi (ne s’affichera pas correctement sur tous les clients)
  • Style d’écriture: Aucun texte souligné
<p style=’width:300px; text-align:center; padding:12px’>
<a style=’display:inline-block;text-decoration:none;width:50px; text-align:center; background:#000000; color:#ffffff; padding:3px 15px; border-radius:12px;-moz-border-radius:12px;-webkit-border-radius:12px’>
Shop
</a>
</p>

Étape 5: Code final et aperçu:

<div class='contentEditableContainer contentTextEditable'>
<div class='contentEditable'>
    <p style=’width:300px; text-align:center; padding:12px’>
<a style=’display:inline-block;width:50px; text-align:center; background:#000000; color:#ffffff; padding:3px 15px; border-radius:12px;’-moz-border-radius:12px;-webkit-border-radius:12px>
Shop
</a>
</p>
</div>
</div>

Les bordures rouges sont uniquement présente pour illustrer le <p> avec le remplissage agissant comme un conteneur pour votre bouton.

[Total : 0    Moyenne : 0/5]
Mis à jour le Juillet 20, 2018

Articles liés