Intégrer un bouton CSS dans un article blogger

[Résolu/Fermé]
Signaler
-
Messages postés
1
Date d'inscription
vendredi 13 mars 2015
Statut
Membre
Dernière intervention
13 mars 2015
-
Bonjour!

Voulant intégrer un simple bouton (menant vers un lien externe) à la fin de mes articles blogger je me heurte à un problème majeur : comment l'intégrer?

J'ai pu générer un joli CSS à l'aide de http://css3buttongenerator.com/, qui donne ceci :
.btn {
background: #d93497;
background-image: -webkit-linear-gradient(top, #d93497, #682bb8);
background-image: -moz-linear-gradient(top, #d93497, #682bb8);
background-image: -ms-linear-gradient(top, #d93497, #682bb8);
background-image: -o-linear-gradient(top, #d93497, #682bb8);
background-image: linear-gradient(to bottom, #d93497, #682bb8);
-webkit-border-radius: 25;
-moz-border-radius: 25;
border-radius: 25px;
text-shadow: 2px 2px 4px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
-moz-box-shadow: 2px 2px 5px #000000;
box-shadow: 2px 2px 5px #000000;
font-family: Georgia;
color: #ffffff;
font-size: 20px;
padding: 10px 15px 10px 15px;
text-decoration: none;
}

.btn:hover {
background: #682bb8;
background-image: -webkit-linear-gradient(top, #682bb8, #d93497);
background-image: -moz-linear-gradient(top, #682bb8, #d93497);
background-image: -ms-linear-gradient(top, #682bb8, #d93497);
background-image: -o-linear-gradient(top, #682bb8, #d93497);
background-image: linear-gradient(to bottom, #682bb8, #d93497);
text-decoration: none;
}

Seulement je ne sais pas comment l'intégrer à mon article, j'ai cherché un peu partout, essayé deux trois trucs avec la balise button mais je n'arrive à rien de concluant, sauriez-vous comment faire?
Je suppose que le mieux est de lier le html à une feuille de style externe (je compte utiliser ce bouton à de multiples endroits) mais je ne saurait pas non plus comment l'intégrer dans le code... Help!?

Merci d'avance!

1 réponse

Messages postés
1
Date d'inscription
vendredi 13 mars 2015
Statut
Membre
Dernière intervention
13 mars 2015

Rebonjour!

Je reviens finalement avec la solution que j'ai trouvée entre temps, au cas où ça en aiderait certains...

J'ai collé mon code entre les balises b:skin (modification html du modèle blogger) de cette façon (rajout du "a" devant les styles pour correspondre à la balise html) :
/* Bouton
----------------------------------------------- */
a.btn {
background: #d93497;
background-image: -webkit-linear-gradient(top, #d93497, #682bb8);
background-image: -moz-linear-gradient(top, #d93497, #682bb8);
background-image: -ms-linear-gradient(top, #d93497, #682bb8);
background-image: -o-linear-gradient(top, #d93497, #682bb8);
background-image: linear-gradient(to bottom, #d93497, #682bb8);
-webkit-border-radius: 25;
-moz-border-radius: 25;
border-radius: 25px;
text-shadow: 2px 2px 4px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
-moz-box-shadow: 2px 2px 5px #000000;
box-shadow: 2px 2px 5px #000000;
font-family: Georgia;
color: #ffffff;
font-size: 20px;
padding: 10px 15px 10px 15px;
text-decoration: none;
}

a.btn:hover {
background: #682bb8;
background-image: -webkit-linear-gradient(top, #682bb8, #d93497);
background-image: -moz-linear-gradient(top, #682bb8, #d93497);
background-image: -ms-linear-gradient(top, #682bb8, #d93497);
background-image: -o-linear-gradient(top, #682bb8, #d93497);
background-image: linear-gradient(to bottom, #682bb8, #d93497);
text-decoration: none;
}

Ce qui m'a permis d'utiliser ce CSS pour tout les boutons que je souhaite intégrer à mon blog!

Puis j'utilise ce code html dans mon article :
<a class="btn" href="[lien du bouton]" target="_blank" >[texte du bouton]</a>

(target="_blank" sert à ouvrir le lien dans un nouvel onglet)

Voila, peut-être que ça pourra en aider certains...