Resize Button

Question

I have a "button" that I want to use on my entire site, but depending on where the button on the site, I want it to display in different sizes.

In my HTML, I tried (but didn't work):

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

And the corresponding CSS:

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

I suggested that if every time I call it class , I can just pass the size and hey-presto! .... but not ....

Adding width and height, as I call the button class , seems to do nothing with its size. Does anyone know how I can do this? And if I put the width and height in CSS , then the button will have the same size everywhere.

Answer 1

You cannot use the width and height attributes directly, use the style attribute, for example style="some css here" if you want to use the inline style:

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

Please note, however, that inline style should usually be avoided as it improves service and update style by nightmare. Personally, if I had a button similar to yours, but also wanted to use different sizes, I would work with several CSS classes for calibration, for example:

  .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> 

JsFiddle example

Using this method of defining styles, all style information is deleted from your HTML markup, which will make it easier for you if you want to resize all small buttons - you only need to change them once in CSS.

Answer 2

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

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

Or the best way to have different sizes (let's say there will be 3 standard sizes for a button) is to have classes only for size.

For example, you could 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 every size you want to have. Thus, you still have the advantages of using a stylesheet, if you say you want to resize all the small buttons at the same time.

Answer 3

Use inline styles:

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

Fiddle

Answer 4

Another alternative is that you are allowed to have multiple classes in the tag. Consider:

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

And CSS:

  .button { /* all your common button styles */ } .big { height: 60px; width: 100px; } .small { height: 40px; width: 70px; } 

etc.

Answer 5

try this resizable button

 <button type="submit me" style="height: 25px; width: 100px">submit me</button>