HTML - définir taille bouton

Diva -
Utilisateur anonyme - 27 août 2019 à 12:06

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

Afficher la suite

5 réponses

Réponse 1 / 5

Meilleure réponse
La meilleure réponse est la réponse qui a été validée par nos équipes.
maw

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
84
1. Bonobo
  
  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).
  
  0
2. tryan44 Messages postés 1289 Date d'inscription Statut Membre Dernière intervention 220
  
  @Bonobo : faut regarder les dates de temps en temps avant de poster ... 25 mai 2005 à 14:12 !
  
  -9
3. Humain
  
  Son commentaire n'en est pas moins judicieux... et utile ;-)
  
  0
4. test
  
  tout à fait !!
  
  0
5. Utilisateur anonyme
  
  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...
  
  0
Réponse 2 / 5
Erdnax Messages postés 2279 Statut Contributeur 497
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">
```
@+
40
Réponse 3 / 5
Eric

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>
10
1. zikah.com
  
  <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>
  
  0
Réponse 4 / 5
slash4u

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>
3
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Réponse 5 / 5
Erdnax Messages postés 2279 Statut Contributeur 497

Trouve des textes de la même longueur, ou essaie de mettre des espaces avant et après les textes plus court...

@+
-24
1. Zewoble
  
  Mdr moi je dit !!!
  Mon pauvre Erdnax t'est tu trompée de poste ? =o
  
  0
2. RollingLikeABoss
  
  hors sujet total! ne marchera pas.
  
  0
3. DragonvSniper
  
  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.
  
  0

HTML - définir taille bouton

5 réponses

Discussions similaires

Newsletters