Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

css

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?

like image 724
ashu Avatar asked Aug 22 '10 05:08

ashu


People also ask

How do you apply to everything in CSS?

The * selector selects all elements. The * selector can also select all elements inside another element (See "More Examples").

How do you select all elements in a button in CSS?

The attribute selector here is [type="button"] . This selector as a whole says “for all forms, select the input elements whose type attribute is button“. In other words, select all the form buttons in the page.

How do I link a button to another page in CSS?

To create a button link to another page in HTML,just add <a> tag and wrap it around the simple Html button. Inside a <a> tag simply use href=“” attribute to give the path of the desired page.

How do you target a button in CSS?

Definition and Usage. URLs with an # followed by an anchor name link to a certain element within a document. The element being linked to is the target element. The :target selector can be used to style the current active target element.


2 Answers

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; 
} 
like image 53
Delan Azabani Avatar answered Nov 06 '22 23:11

Delan Azabani


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; 
} 
like image 45
Aman Avatar answered Nov 06 '22 21:11

Aman