Resizing a button

Question

I have a  button  that I wish to use all throughout my site  but depending on where in the site the button is  I want it to display at different sizes    In my HTML I have tried  but its not working      lt div class  button  width  60  height  100  gt This is a button lt  div gt    And the matching CSS    button     background-color   000000    color   FFFFFF    float  right    padding  10px    border-radius  10px    -moz-border-radius  10px    -webkit-border-radius  10px      I assumed that if each time I call this class I can just pass in a size and hey-presto     but not      By adding the width and height as I call the button class seems to do nothing to the size of it  Does anyone know how I can do this  And if I put the width and height in the CSS then the button will be the same size everywhere

User · Answer

If you want to call a different size for the button inline, you would probably do it like this:

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

Or, a better way to have different sizes (say there will be 3 standard sizes for the button) would be to have classes just for size.

For example, you would call your button like this:

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

And in your CSS

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

and just create classes for each size you wish to have. That way you still have the perks of using a stylesheet in case say, you want to change the size of all the small buttons at once.

User · Answer

Use inline styles    lt div class  button  style  width 60px height 100px   gt This is a button lt  div gt    Fiddle

User · Answer

Another alternative is that you are allowed to have multiple classes in a tag   Consider     lt div class  button big  gt This is a big button lt  div gt    lt div class  button small  gt This is a small button lt  div gt    And the CSS     button           all your common button styles          big        height  60px       width  100px       small        height  40px       width  70px       and so on

User · Answer

try this one out resizeable button   lt button type  submit me  style  height  25px  width  100px  gt submit me lt  button gt

User · Answer

You should not use  width  and  height  attributes directly  use the style attribute like style  some css here  if you want to use inline styling    lt div class  button  style  width 60px height 30px   gt This is a button lt  div gt   Note  however  that inline styling should generally be avoided since it makes maintenance and style updates a nightmare  Personally  if I had a button styling like yours but also wanted to apply different sizes  I would work with multiple css classes for sizing  like this    x000D   x000D      button   x000D          background-color   000000  x000D          color   FFFFFF  x000D          padding  10px  x000D          border-radius  10px  x000D          -moz-border-radius  10px  x000D          -webkit-border-radius  10px  x000D          margin 10px x000D        x000D       x000D       small-btn   x000D          width  50px  x000D          height  25px  x000D        x000D       x000D       medium-btn   x000D          width  70px  x000D          height  30px  x000D        x000D       x000D       big-btn   x000D          width  90px  x000D          height  40px  x000D        x000D       lt div class  button big-btn  gt This is a big button lt  div gt  x000D       lt div class  button medium-btn  gt This is a medium button lt  div gt  x000D       lt div class  button small-btn  gt This is a small button lt  div gt  x000D    x000D   x000D   x000D    jsFiddle example  Using this way of defining styles removes all style information from your HTML markup  which in will make it easier down the road if you want to change the size of all small buttons - you ll only have to change them once in the CSS

[html] Resizing a button

Examples related to html

Examples related to css

Examples related to button

Examples related to size