HTML - définir taille bouton [Fermé]

Signaler
-
Messages postés
21
Date d'inscription
jeudi 11 octobre 2018
Statut
Membre
Dernière intervention
18 mars 2020
 -
Bonjour,

J'essaie de faire plusieurs boutons de même dimension, sauf que celle ci varie en fonction du texte inscrit sur le bouton...

Je parle de boutons de boutons de formulaire de ce genre :

<form>
<input type="button" name="nom"...

j'ai essayé width et size mais ça ne marche pas, quelqu'un aurait-il la solution ? merci
A voir également:

5 réponses

Réponse 1 / 5

Je me suis posé la même question dans un projet, je te donne la solution avec un exemple parlant :

<input type="submit" value="Envoyer" style="width:130px">

En fait il suffit de rajouter l'attribut style, qui permet de définir la taille du bouton en pixels. Tu mets la même taille sur tous tes boutons, et le tour est joué.

Bon courage.

Maw
75
Merci
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Signaler

Oui, et de plus, étant donné que tu incorpore un ligne de CSS, tu peux aussi en profiter pour y ajouter quelques modifications et décorations (couleur, effets et autres).
Signaler
Messages postés
1288
Date d'inscription
mardi 24 janvier 2012
Statut
Membre
Dernière intervention
26 octobre 2014
 230
@Bonobo : faut regarder les dates de temps en temps avant de poster ... 25 mai 2005 à 14:12 !
Signaler

Son commentaire n'en est pas moins judicieux... et utile ;-)
Signaler

tout à fait !!
Signaler
Messages postés
21
Date d'inscription
jeudi 11 octobre 2018
Statut
Membre
Dernière intervention
18 mars 2020
Sauf que moi je ne sais pas comment faire pour mettre avec ce code: 


<[/contents/242-introduction-au-dynamic-html-dhtml div] class="box">
  <button>Commencez maintenant</button>
  <style>
      button{
          font-size: 10em;
          font-family: Arial, Helvetica, sans-serif;
          padding: 10px;
          border: none;
          background-color: green;
          color: white;
          border-radius: 3px;
          box-shadow: 6px 6px 20px 4px rgba(0, 0, 0, 0.3);
          cursor: pointer;
          outline: none;
          transition: 0.2s;
      }

      button:hover{
          transform: scale(1.01);
          box-shadow: 6px 6px 25px 4px rgba(0, 0, 0, 0.18);
      }
      button:active{
          transform: scale(0.98);
          box-shadow: 6px 6px 18px 2px rgba(0, 0, 0, 0.23);
      }
  </style>

</div>

et avec 
width: 200px;
height: 150px;
ça ne marche pas...
Réponse 2 / 5
Messages postés
2273
Date d'inscription
mercredi 1 octobre 2003
Statut
Contributeur
Dernière intervention
1 octobre 2007
 494
En pour compléter cette bonne solution, si tu as plusieurs boutons à paramétrer de la sorte, tu peux définir un style pour la page, et mettre les propriétés dedans. L'avantage, c'est que lorsque tu modifie le paramètre, tu ne le fais qu'une fois ;) 
<style type="text/css">
.btn_taille_egale{
   width:130px;
}
</style>

et pour chaque bouton : 
<input type="submit" value="Envoyer" class="btn_taille_egale">

@+
Réponse 3 / 5

Si en plus tu as envie que les boutons prennent tous, la taille du plus grand d'entre eux, tu change le style :

<style type="text/css">
.btn{
width:100%;
}
</style>
Signaler

<button type="button" style="background:white; cursor:hand; border:solid 1px black;"
style="background:white; cursor:hand; border:solid 1px black;"
onclick="JavaScript: alert('Bouton Image')">
<img src="../Images/ICO_Home.gif">
</button>
Réponse 4 / 5

fait une page CSS dans laquel tu inscrit simplement button { width: 130px; } et si ensuite tu relie ta page html avec ta page CSS tes bouton fairont tous la meme taille
PS: le code des boutons est forcément <button>
Réponse 5 / 5
Messages postés
2273
Date d'inscription
mercredi 1 octobre 2003
Statut
Contributeur
Dernière intervention
1 octobre 2007
 494
Trouve des textes de la même longueur, ou essaie de mettre des espaces avant et après les textes plus court...

@+
Signaler

Mdr moi je dit !!!
Mon pauvre Erdnax t'est tu trompée de poste ? =o
Signaler

hors sujet total! ne marchera pas.
Signaler

Mdr, le pauvre il veut juste le faire à l'arrache en rajoutant des espaces dans la chaîne de caractères ^^.
= Très très mauvaise idée.
Posez votre question