Créer un bouton CSS

Bonjour à tous,

J'ai une petite question de débutante, je pense que la réponse est quelque part sur ce forum mais je ne suis pas sur, alors si je ne suis pas au bon endroit vous pourrez me rediriger.

Je veux créer un bouton en CSS. Mais je ne sais pas quelle méthode est la mieux pour que tous les navigateur le voit correctement.
Au départ j'ai ça:

<div class="btn1"><a href="http://fwww.google.com">Créatif</a></div>

Mais je ne veux pas que l'on voit le texte "créatif" Je veux que mon bouton soit en entièrement en image
Dans le CSS j'ai fait ça:

.btn1  {  height:33px ; width: 150px ; float: left; margin: -33px 0px 0px 130px; padding: 0px 10px; line-height:45px; }
.btn1 :link { height:33px ; width: 150px ; background:url(../../images/bouton_creatifs_job.png) no-repeat 0px 0px; padding: 5px 0px 15px 9000px; }
.btn1 :hover { height:33px ; width: 150px ; background:url(../../images/bouton_creatifs_job.png) no-repeat 0px -35px; padding: 5px 10px 15px 9000px; }
.btn1 :visited { height:33px ; width: 150px ; background:url(../../images/bouton_creatifs_job.png) no-repeat 0px 0px; padding: 5px 10px 15px 9000px; }

En fait je mets une image en fond qui monte ou descend d'un cran suivant qu'on soit en rollover.
Le problème que je rencontre c'est pour retirer le texte. Comme vous le voyez ici, avec le padding gauche, mais c'est nul comme solution. J'avais pensé avec le text-indent mais ça marche pas avec ie.

Comment je peux faire? Est-que quelqu'un pourrait m'aider?

Alors.... C'est n'est pas la bonne facon de faire.

Une alternative : Utilise simplement une image

<a href='#'><img src='...' alt='Créatif'/></a>

Voila

Sinon pour ton petit effet au survol tu fait

a.button img:hover{
position:relative;
top:2px;
left:2px
}

bonjour,

il est possible d'expédier au loin le texte avec un letter-spacing: négatif, ou un line-height excessif et overflow, mais cela peut poser un problème si l'image de fond n'est pas chargé.

On peut par exemple changer ton architecture div-> a en a-> span et cacher le texte sous l'image de fond, si l'image est manquante le texte est visible.

<a class="btn1" href="http://fwww.google.com"> Créatif<span>&nbsp;</span></a>

a.btn1                  {height:33px ; width: 150px ; position:relative;display:inline-block;/* ou float:left;*/}
a.btn1          span  {position:absolute;height:100%;width:100%;top:0;left:0;}
a.btn1:link     span , 
a.btn1:visited span { background:transparent url(../../images/bouton_creatifs_job.png) no-repeat 0px 0px; } 
a.btn1:hover  span  {background-position: 0px -35px;} 
 

cordialement

Ah oui j'ai oublié de dire je ne peux pas changer la structure des div ou utiliser une image directement, car je travaille sur un site wordpress....:|
Et donc je ne peux pas modifier la structure c'est pour ça que je voulais customizer avec le css...

Il y aurait une solution qui marche sur tout les navigateurs?

Excusez moi, pour être plus précise, il s'agit du bouton input=submit
C'est un bouton de formulaire. (L'exemple plus haut était plus commode pour moi à expliquer mas je m'apercois que j'aurais du le dire avant )

#form1  input[type=submit] { margin: 0px 0px 0px -2px; height:35px ; width:120px ; background:url(../../images/connexion_button_job.png) no-repeat 0px 0px; padding: 5px 0px 15px 120px; }
#form1 input[type=submit]:hover {height:35px ; width:120px ; background:url(../../images/connexion_button_job.png) no-repeat 0px -36px; padding: 5px 0px 15px 120px;  }

Ça ça marche dans chrome et IE mais pas dans firefox... Il reste la première moitié du mot.
Que puis je faire ?
Modifié par Laura_dubois (16 Mar 2011 - 18:21)

Pour un bouton de validation de formulaire, dans l'absolu il faudrait faire:

<button type="submit"><img src="..." alt="Le texte qui va bien"></button>

ou:

<input type="image" src="..." alt="Le texte qui va bien">

Même sur un site qui utilise WordPress (ou tout autre CMS), on peut généralement changer la structure HTML.

Mais en partant du principe que tu ne peux vraiment pas toucher au code HTML, et donc que tu es condamnée à utiliser une solution pas accessible (si l'image de fond ne s'affiche pas, l'information disparait sans alternative textuelle affichée...), tu dois pouvoir utiliser un text-indent négatif pour masquer le texte.