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

Question

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?

score 41 · Answer 1 · answered Aug 22 '10 at 06:01

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

How to add Hover in this Scss? – AJEET SINGH Mar 14 '18 at 09:06 — AJEET SINGH, Mar 14 '18 at 09:06

Aman · Answer 2 · 2010-08-22T06:19:44.020

12

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

edited Aug 22 '10 at 06:19

answered Aug 22 '10 at 06:01

Aman

4,786
1
17
17

2

The second example is **not** CSS3. The attribute selector already exists in CSS2.1. It was only expanded in CSS3. http://www.w3.org/TR/CSS2/selector.html#attribute-selectors – Yi Jiang Aug 22 '10 at 06:04
IMO, this item deserves to be marked as the answer; IOW, I think it deserves a green check mark. – David A. Gray Jan 28 '16 at 02:19

score 3 · Answer 3 · answered Aug 22 '10 at 06:01

3

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

answered Aug 22 '10 at 06:01

Marc B

356,200
43
426
500

Always add a description to what the code does to make your answer more helpful – Omnibyte Jul 22 '22 at 06:16

score 2 · Answer 4 · answered Oct 20 '15 at 20:28

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.

score 1 · Answer 5 · answered Aug 22 '10 at 09:17

1

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.

answered Aug 22 '10 at 09:17

Stuart Burrows

10,824
2
34
33

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

5 Answers5

Linked