Comment obtenir des boutons de cette forme?

[Wave]

Bonjour,

je cherche mais je ne trouves pas de codes CSS pour PHPBB3, permettant d'obtenir ce résultat :.

J'aimerai que tous les boutons: Rechercher, envoyer, ok, retour, icône des balises BBCODE etc... soit comme sur le screen.
J'ai trouvé ceci

Code:

.button2 {
 padding: 500px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
 -khtml-border-radius:5px;
}

.mainoption {
 padding: 500px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
 -khtml-border-radius:5px;
}

Mais ce n'est pas le résultat attendu et le bouton "Envoyer" ne change pas, donc je remercie d'avance celui que me trouvera un code permettant de me satisfaire.

Amicalement.

[humhum78]

Coucou, vous avez essayé de changer la valeur des propriétés dans votre code ? Salut.

[Wave]

Bonjour,

Oui mais je ne suis pas un doué, et je n'ai pas trouvé ce que je voulais, donc je demande.

Amicalement

[Psyaliah]

Il faut juste ajouter une image de fond, avec le rectangle blanc + son dégradé ^^

[Wave]

Bonsoir,

Merci pour vos réponses, mais comme je ne suis pas un pro en CSS, pourriez-vous m'indiquez le code à mettre?

Amicalement, bonne nuit.

[Wave]

up

[Dr. Karlos]

Bonjour,

Enlevez cette partie de votre CSS:

Code:

.button2 {
 padding: 500px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
 -khtml-border-radius:5px;
}

Et remplacez le tout par ceci:

Code:

a.button1, a.button2, button.button2, input.button1, input.button2 {
background-image: url(http://2img.net/i/fa/prosilver/bg_button.gif); /* image de fond donnant le résultat*/
background-position: top; /* position du fond d'écran */
background-repeat: repeat-x; /* répétition du fond d'écran */
color: black; /* couleur de l'écriture */
font-family: Verdana,Arial,Helvetica,sans-serif; /* ordre des polices à utiliser si une n'est pas présente */
padding: 2px 3px; /* espace par rapport aux objets environnants, en haut et à droite */
width: auto!important; /* largeur des boutons */
}

Cordialement,

---

Dr. Karlos
Aidant Forumactivien.

[Wave]

Bonsoir,

merci pour votre code, j'ai ajouté ceci

Code:

width: 20px;
height: 24px;

Pour avoir des plus grand boutons, mais je n'arrive pas à mettre le texte en bas du bouton, le mien est centré au milieu.

Amicalement.

[Dr. Karlos]

Bonjour,

Que voulez-vous dire par "mettre le texte en bas du bouton"?


Cordialement,

---

Dr. Karlos
Aidant Forumactivien.

[Wave]

Bonjour/Bonsoir,

Au lieu d'avoir ça: , j'ai ça: (je ne parle pas de la différence entre les deux mots mais leur position sur le bouton.

Amicalement.

[Dr. Karlos]

Bonjour,

C'est sur qu'il y a déformation puisque vous augmentez les valeurs... Essayez d'augmenter la propriété "padding" ou de laisser les valeurs originelles!

C'est les solutions rapides que je vous propose.


Cordialement,

---

Dr. Karlos
Aidant Forumactivien.

[Wave]

Bonsoir,

même en laissant les valeurs originelles, le texte est centré

[Wave]

Personne?

[Censure]

Essayer avec un

Code:

padding-top:-valeurpx;

Remplacer "valeur" par le nombre de pixels voulus.( - ou + )

[Psyaliah]

Rajoute dans le code plus haut:
Bottom = en bas ; Middle = milieu ; Top = haut
Met celle que tu veux, je t'ai mis celle du bas la.

Code:

vertical-align: bottom;

[Wave]

Bonsoir,

Aucun des deux codes ne fait déplacer le texte en bas du bouton. :s
Merci quand même pour votre aide

Amicalement.

[Wave]

up

[Invité]

Bonsoir,

Et comme ceci:

Code:

 input.button1, input.button2 {
background-image: url(http://2img.net/i/fa/prosilver/bg_button.gif);
background-position: top;
background-repeat: repeat-x;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-weight: bold;
padding-top: 8px !important;
width: auto!important;}

Cordialement.

[Wave]

Merci encore Isolde, vous n'êtes pas Staff pour rien

PS: Merci aussi à tous ceux qui m'ont aidé.

Amicalement