Objet button arrondi

Version imprimable

Bonjour

J'ai des objets buttons qui me serve à avoir la fonction submit sur les navigateurs.

Ces objets buttons sont entouré de deux images qui servent a les arrondir :
Code:

1 2 3 4 5 6 <img src="/img/green-btn-left.png" class="btn_left"> <button type="submit" id="btn-user-submit" name="btn-user-submit" class="green-btn-content " onclick=""> Save changes </button> <img src="/img/green-btn-right.png" class="btn_right">
Seul problème, lorsque je clique sur les images, rien ne se passe.
Existerait il un moyen pour les inclure dans le bouton ?
J'ai essayer de les insérer et de réglere les marges pour les sortir de part et d'autre du bouton, mais alors ils redeviennent non cliquable.

Je ne peux pas définir la taille des boutons puisque le texte varie à l'intérieur.
Je ne vois pas vraiment comment faire autrement.
Une idée ?

Je ne trouve que des solutions à base de balise <a> sur internet et j'ai cette contrainte d'utiliser un objet <button>.

Merci
Pierre
PS : compatible IE7 et supérieur.

13/05/2010, 23h36
Ethyde

Salut,

hum tu aurais une capture commenté ? parce que là j'ai du mal à visualiser l'ensemble :)

1 pièce(s) jointe(s)

Déjà voila le code CSS.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
.btn_left { display: inline; float:left; }
.btn_right { display: inline; float:left; }
 
.grey-btn-content { 
    display: inline; 
    height:28px; 
    background:transparent url(/img/grey-btn-middle.png) repeat-x; 
    float:left; 
    padding: 0px; 
    margin: 0; 
    border:0 none;
    color:#666666;
    cursor: pointer;
}
.green-btn-content { 
    display: inline; 
    height:28px; 
    background:transparent url(/img/green-btn-middle.png) repeat-x; 
    float:left; 
    padding: 0px; 
    color:#FFF;
    border:0 none;
    cursor: pointer;
    margin:0px;
}
.button a{
    text-decoration:none;
    padding-top:8px;
}
.button a.cancel_btn{
    padding:0px;
    margin-top:9px;
    color:#336699;
    position:absolute;
}
.button{
    float: left;
    height: 28px;
    margin: 2px;
    cursor: pointer;
}

pour le rendu que j'ai voir la pièce jointe.

Le problème est que ce bouton vert est composé de 2 images (droite et gauche) et d'un bouton central avec un background... je cherche un moyen de faire ca plus élégament, de facon a pouvoir cliquer sur les images aussi(et pas seulement sur le bouton comme actuellement)

Salut,

En CSS2 la solution la plus simple serait d'utiliser des boutons de taille fixe, et d'utiliser une seule et unique image...

Mais je suppose que tu veux des boutons de taille variable. Dans ce cas il faudrait utiliser des span imbriqué :

Code:

<button type="submit"><span><span>Save changes</span></span></button>

Avec un CSS de ce genre là :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 button { color: #fff; background-color: green; margin: 0; border: 0; padding: 0; padding-right: 15px; /* largeur de l'image de droite */ background: <<<image de droite>>> } button span { padding-left: 15px; /* largeur de l'image de gauche */ background: <<<image de gauche>>> } button span span { background: <<<image du centre >>> }
Certains utilise également seulement 2 images, avec une image très large afin de s'adapter à toutes les tailles... mais cela revient un peu au même...

Sinon tu peux faire cela de façons très simple en CSS3 avec border-radius mais ce n'est pas encore supporté par IE.

Toutefois tu peux très bien proposer une dégradation "propre".
Par exemple avec ce CSS :
Code:

1 2 3 4 5 6 7 8 9 10 button { background-color: #94C861; border: 1px solid #699B37; padding: 0.5em 1em; color: #fff; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
On obtient quelque chose d'assez proche de ce que tu cherches à faire (il faudrait adapter les tailles et éventuellement utiliser une image dégradé en background pour avoir la même chose).

Sous IE on perd seulement les arrondis...

Sinon on pourrait même utiliser border-image mais je crois que c'est encore moins bien supporté...

a++

Hello
Merci pour ta réponse(et désolé pour la réponse tardive, j'ai eu d'autres ticket, donc aps eu le temps de me remettre sur le design...)

Donc, ta solution est presque parfaite, j'ai du néanmoins changer quelques petites trucs, je met mon code à la suite.

En gros :
- ajout d'un niveau de span de plus
- definition du height des span
- display block pour le span
- no wrap pour IE(autrement pour les textes long, il passe a la ligne, pas joli...)

c'est a peu pret tout.

Html :

Code:

1
2
3
4
5
6
7
8
9
10
 
<button type="button" id="select_targets" name="select_targets" class="grey-btn-content " onclick="">
  <span>
    <span>
      <span>
         Select WordPress Blog(s)
      </span>
    </span>
  </span>
</button>

CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
.grey-btn-content { 
    color:#666666;
}
.green-btn-content { 
    color:#FFF;
}
.button{
    float: left;
    height: 28px;
    margin: 2px;
    cursor: pointer;
}
.button button{
 /* astuce IE pour ne pas avoir des boutons demesurés*/
    width:auto;
    overflow:visible;
}
.button button{
   display: block; 
   height:28px; 
   background:transparent; 
   float:left; 
   padding: 0px; 
   margin: 0; 
   border:0 none;
   cursor: pointer;
}
.button button span {
    display:block;
    height:28px;
    margin: 0; 
    border: 0; 
    padding: 0;
    padding-right: 11px;
}
.button button span span {
    padding:0px;
    padding-left: 11px;
}
.button button span span span {
    white-space:nowrap;
    padding:8px 0px 0px 0px;
}
button.grey-btn-content span {
    background:transparent url(/img/grey-btn-right.png) no-repeat right;
}
button.grey-btn-content span span {
    background:transparent url(/img/grey-btn-left.png) no-repeat;
}
button.grey-btn-content span span span {
    background:transparent url(/img/grey-btn-middle.png) repeat-x; 
}