CSS & Button: How to override native CSS of html buttons element?

Question

I try to apply to buttons an elegant CSS style I found. I need to keep buttons for semantic/accessibility reasons. But my nice CSS is conflicting with the button elements' native CSS style, and loosing to it.

How to override the natural CSS of html buttons' elements ?

/* CSS works for buttonis, doesn't work for buttons*/
button.btn, buttoni.btn {  
   ... 
}

http://jsfiddle.net/bkWNw/3/

Edit: The buttons element should look exactly like the buttonis elements.

Answer 1

Either use a CSS Reset, or set the border and outline to none.

border: none;
outline: none;

http://jsfiddle.net/bkWNw/5/

Answer 2

On the latest browser you can also use -webkit-appearance: none -moz-appearance: none to remove the default styling from those elements. Demo: http://jsfiddle.net/faueK/

Answer 3

Here's a complete CSS reset:

In CSS

.reset-style {
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  background-color: transparent;
  cursor: pointer;
  }

<button class="reset-style">This is clickable</button>

In JS:

export const resetButton = {
    padding: 0,
    border: 'none',
    font: 'inherit',
    color: 'inherit',
    backgroundColor: 'transparent',
    cursor: 'pointer'
}