Alex Rivera | Logout

Resizing a button

Asked 2012-07-27T14:04:46.177
24

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

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.

html css button size
Edit
Report

1 Answer

3

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

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

And the CSS:

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

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

and so on.

answered 2012-07-27T14:12:06.717

Your Answer