web-dev-qa-db-fra.com

Redimensionner un bouton

J'ai un "bouton" que je souhaite utiliser tout au long de mon site, mais en fonction de l'emplacement du button, je souhaite qu'il s'affiche à différentes tailles.

Dans mon HTML, j'ai essayé (mais cela ne fonctionne pas):

<div class="button" width="60" height="100">This is a button</div>

Et le CSS correspondant:

.button {
  background-color: #000000;
  color: #FFFFFF;
  float: right;
  padding: 10px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

J'ai supposé que si chaque fois que j'appelle ça class je peux juste passer une taille et hé-presto! .... mais pas ....

En ajoutant la largeur et la hauteur comme j'appelle le buttonclass semble ne rien faire à sa taille. Est-ce que quelqu'un sait comment je peux faire ça? Et si je mets la largeur et la hauteur dans le CSS alors le button aura la même taille partout.

htmlcssbuttonsize
8
heyred

Vous ne devez pas utiliser directement les attributs "largeur" ​​et "hauteur", utilisez l'attribut style comme style="some css here" si vous souhaitez utiliser le style en ligne:

<div class="button" style="width:60px;height:30px;">This is a button</div>

Notez cependant que le style en ligne doit généralement être évité car il fait de la maintenance et des mises à jour de style un cauchemar. Personnellement, si j'avais un style de bouton comme le vôtre mais que je voulais également appliquer différentes tailles, je travaillerais avec plusieurs classes CSS pour le dimensionnement, comme ceci:

   .button {
        background-color: #000000;
        color: #FFFFFF;
        padding: 10px;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        margin:10px
    }
    
    .small-btn {
        width: 50px;
        height: 25px;
    }
    
    .medium-btn {
        width: 70px;
        height: 30px;
    }
    
    .big-btn {
        width: 90px;
        height: 40px;
    }
    <div class="button big-btn">This is a big button</div>
    <div class="button medium-btn">This is a medium button</div>
    <div class="button small-btn">This is a small button</div>

exemple jsFiddle

L'utilisation de cette façon de définir les styles supprime toutes les informations de style de votre balisage HTML, ce qui facilitera la marche à suivre si vous souhaitez modifier la taille de tous les petits boutons - vous n'aurez à les modifier qu'une seule fois dans le CSS.

12
Anders Arpi

Si vous souhaitez appeler une taille différente pour le bouton en ligne, vous le feriez probablement comme ceci:

<div class="button" style="width:60px;height:100px;">This is a button</div>

Ou, une meilleure façon d'avoir différentes tailles (disons qu'il y aura 3 tailles standard pour le bouton) serait d'avoir des classes juste pour la taille.

Par exemple, vous appelleriez votre bouton comme ceci:

<div class="button small">This is a button</div>

Et dans votre CSS

.button.small { width: 60px; height: 100px; }

et créez simplement des classes pour chaque taille que vous souhaitez avoir. De cette façon, vous avez toujours les avantages d'utiliser une feuille de style au cas où vous voudriez changer la taille de tous les petits boutons à la fois.

5
Rampant Creative Group

Une autre alternative est que vous êtes autorisé à avoir plusieurs classes dans une balise. Considérer:

 <div class="button big">This is a big button</div>
 <div class="button small">This is a small button</div>

Et le CSS:

 .button {
     /* all your common button styles */
 }

 .big {
     height: 60px;
     width: 100px;
 }
 .small {
     height: 40px;
     width: 70px;
 }

etc.

2
cobaltduck

Utilisez des styles en ligne:

<div class="button" style="width:60px;height:100px;">This is a button</div>

Violon

2
Turnip