CODEWITHSUNDEEP
css
ashu
ashu

Reputation: 271

How can I apply CSS on all buttons which are present in that page?

I have created a CSS style class:

.btn { 
  color:#050; 
  font: bold 84% 'trebuchet ms',helvetica,sans-serif; 
  background-color:#fed; 
  border:1px solid; 
  border-color: #696 #363 #363 #696; 
}

How can I apply this CSS style class to all buttons which are present in the page without adding class="btn" to every button?

Upvotes: 27

Views: 93523

Answers (5)

Josh Sutterfield
Josh Sutterfield

Reputation: 1998

If you don't want to explicitly set all the styles, but want to use the styles already defined in some pre-existing class (for example the bootstrap btn-default class), you could do something like this: 

<script>
$("button").addClass("btn-default");
</script>

In my case this was what I was looking for, although I'm sure there is some sort of caveat about doing it this way, or you'd expect it was something doable directly from CSS.

Upvotes: 3

Stuart Burrows
Stuart Burrows

Reputation: 10814

just a note 

input[type="button"]

isn't going to work on old browsers like IE6. If that's a problem you will unfortunately need to add your class to each item.

Upvotes: 1

Aman
Aman

Reputation: 5006

button{ 
  color:#050; 
  font: bold 84% 'trebuchet ms',helvetica,sans-serif; 
  background-color:#fed; 
  border:1px solid; 
  border-color: #696 #363 #363 #696; 
}

OR 

input[type="button"]{ 
  color:#050; 
  font: bold 84% 'trebuchet ms',helvetica,sans-serif; 
  background-color:#fed; 
  border:1px solid; 
  border-color: #696 #363 #363 #696; 
}

Upvotes: 13

Marc B
Marc B

Reputation: 360752

input[type=submit], input[type=button], button {
   ...
}

Upvotes: 3

Delan Azabani
Delan Azabani

Reputation: 81412

If your buttons are <input type="button"> or submit, then this should do it:

input[type="button"], input[type="submit"] { 
    color:#050; 
    font: bold 84% 'trebuchet ms',helvetica,sans-serif; 
    background-color:#fed; 
    border:1px solid; 
    border-color: #696 #363 #363 #696; 
}

Otherwise, if your buttons are <button>:

button { 
    color:#050; 
    font: old 84% 'trebuchet ms',helvetica,sans-serif; 
    background-color:#fed; 
    border:1px solid; 
    border-color: #696 #363 #363 #696; 
}

To grab all three kinds of buttons:

button, input[type="button"], input[type="submit"] { 
    color:#050; 
    font: bold 84% 'trebuchet ms',helvetica,sans-serif; 
    background-color:#fed; 
    border:1px solid; 
    border-color: #696 #363 #363 #696; 
}

Upvotes: 42

Related Questions