HTML - définir taille bouton [Fermé]

Signaler
-
lermie12
Messages postés
18
Date d'inscription
jeudi 11 octobre 2018
Statut
Membre
Dernière intervention
20 décembre 2019
-
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

5 réponses

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
68
Merci

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez Comment Ça Marche

CCM 75682 internautes nous ont dit merci ce mois-ci

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).
tryan44
Messages postés
1292
Date d'inscription
mardi 24 janvier 2012
Statut
Membre
Dernière intervention
26 octobre 2014
217
@Bonobo : faut regarder les dates de temps en temps avant de poster ... 25 mai 2005 à 14:12 !
Son commentaire n'en est pas moins judicieux... et utile ;-)
tout à fait !!
lermie12
Messages postés
18
Date d'inscription
jeudi 11 octobre 2018
Statut
Membre
Dernière intervention
20 décembre 2019

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...
Messages postés
2289
Date d'inscription
mercredi 1 octobre 2003
Statut
Contributeur
Dernière intervention
1 octobre 2007
448
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">

@+
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>
<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>
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>
Messages postés
2289
Date d'inscription
mercredi 1 octobre 2003
Statut
Contributeur
Dernière intervention
1 octobre 2007
448
Trouve des textes de la même longueur, ou essaie de mettre des espaces avant et après les textes plus court...

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

hors sujet total! ne marchera pas.

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.