heyred heyred - 6 months ago 20
HTML Question

Resizing a button

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):

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


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;
}


My thinking was 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.

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:

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

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:

HTML

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

CSS

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

.small-btn {
    width: 50px;
    height: 20px;
}

.medium-btn {
    width: 70px;
    height: 30px;
}

.big-btn {
    width: 90px;
    height: 40px;
}

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.

Comments