Aller au contenu

October 15, 2013

1

Créer des boutons extensibles plutôt que statiques !

Je me suis rendu compte que j’ai eu régulièrement à intégrer des boutons extensibles dans mes sites, c’est très utile notamment lorsque votre site est traduit dans plusieurs langues et que par conséquent le texte placé dans le bouton a une longueur différente.

Je vous partage donc ce petit bout de code qui vous permettra de créer ce type de bouton.

HTML

<div id="my_button">
<a class="btn">
<span class="bt_left"> </span>
<span class="bt_center">Mon bouton</span>
<span class="bt_right"> </span>
</a></div>

CSS

#my_button{position:relative;}
#my_button *{color:#f0007d;font-family:Arial, Helvetica, sans-serif;font-size:12px;list-style:none;margin:0;padding:0;text-decoration:none;cursor:pointer;}
#my_button a.btn span{display:block;float:left;font-weight:700;height:35px;line-height:35px;}
#my_button a.btn span.bt_center{background:url(http://emilienmalbranche.fr/tutos/button_ext/images/btn_bdx_center.png) top left repeat-x;padding:0 0 0 6px;}
#my_button a.btn span.bt_left{background:url(http://emilienmalbranche.fr/tutos/button_ext/images/btn_bdx_left.png) top left no-repeat;width:15px;}
#my_button a.btn span.bt_right{background:url(http://emilienmalbranche.fr/tutos/button_ext/images/btn_bdx_right.png) top left no-repeat;width:8px;}
#my_button a.btn:hover span.bt_center{text-decoration:underline;}

Voir la démo

Télécharger les sources

Libre à vous de l’intégrer au sein de prestashop !

Publié par
Plus d'articles pour la catégorie Autres
3 Commentaires Poster un commentaire
  1. courtial
    Nov 7 2012

    Bonjour Emilien ,

    tuto intéressant , mais une question, comment ajouter ce bouton dans la v1.5 en dessous du bouton “ajouter au panier” sur chaque produit ct comment faire pour que lorsqu’on clique sur le le bouton, on soit redirigé par u lien vers une page externe .
    J’avoue que je débute et que je n’y connais aps grand chose
    merci d’avance
    philippe

    Reply
    • Nov 14 2012

      Il faudra ajouter les CSS et le code HTML du bouton dans le fichier tpl correspondant à la vue que vous souhaitez modifier, celà reste technique et nécessite des compétences HTML et CSS

      Reply
  2. François martin
    Nov 30 2012

    moi j’ai créer une sélection pour mon site mais je voudrais un bouton qui me permette de “partir” vers la page de la sélection je vous envoi ma création :

    Francois

    Eliana

    par exemple si je veux aller sur François , je veux que ça me rediriger vers François !!! quelqu’un peut m’aider

    Reply

Partagez votre opinion, postez un commentaire.

(requis)
(requis)

Note: Le HTML est autorisé. Votre e-mail (ne sera pas publié).

S'abonner aux commentaires


+ 9 = 10