I have a style for a.btn, can I use this for a input type=button also?

In my css, the CSS designer created a style for a button but it only works on a href tag.

i.e.:

a.btn {
   color:..
   border-radius: ...
   paddin开发者_StackOverflowg:..
   text-transform:..
   font-sizE:...
   -webkit-transition:..
   -moz-transition:
   -o-transition:..
   transition:..
   -webkit-border-radius:..
   -moz-border-radius:..


}

Is it possible for me to have all these styles applied to a input type=button element?

Two possibilities:

1. Change a.btn to .btn and <input /> to <input class="btn" />
2. Or change a.btn to a.btn, input[type=button]

Use a.btn, input[type=button] as your selector instead.

http://jsfiddle.net/AaVLD/

All you need to do to have your style applied to buttons is add a second selector, like so:

a.btn,
input[type=submit],
input[type=button],
button
{
  color:..
  border-radius: ...
  padding:..
  text-transform:..
  font-sizE:...
  -webkit-transition:..
  -moz-transition:
  -o-transition:..
  transition:..
  -webkit-border-radius:..
  -moz-border-radius:..
}

In the example, we use a comma to separate the different selectors. I have added three selectors in this case, one for submit buttons, one for button inputs, and one for button elements.

Its worth noting that the code above does NOT work in Internet Explorer 6 (if that is a factor), but you can extend it in the same way so that buttons you want styling all have a ."btn" class by replacing a.btn with just .btn

Input type="button" elements are notoriously problematic. Theoretically, all modern browsers support styling, but older variants don't.

You can try something like:

<input type="button" class="btn" ...>

and replace "a.btn" with "btn", but you'd have to test it in all your target browsers. The (easier) alternative is to use the <button/> tag instead, with the "important" note about what it actually returns. It's significantly more flexible for styling.

This should work.

a.btn, input[type=submit], input[type=button], input[type=reset] { ... }

(but not for IE6) You may use JavaScript for all cases. http://scvinodkumar.wordpress.com/2009/12/14/inputtypesubmit-css-not-working-in-ie6/