Сбросить/нормализовать <button> действовать как <a>

Question

Как сделать стиль <button> элементов похожими на <a> элементов как можно ближе?

Мне не нужны ссылки text-decoration: underline; color: blue; и такие - я все равно перезагружаю их. В принципе, я хочу, чтобы <button> был как обычный текст, пока я не применяю классы.

Background: В приложении JavaScript у меня есть обработчики кликов, привязанные к <a> элементам. Эти элементы <a> не имеют натурального href, что препятствует доступности клавиатуры в некоторых браузерах. Похоже, что замена <a> на <button> будет отражать намерение элемента лучше. Но когда я использую <button>, браузер плохо разбирается в дизайне. Как запретить браузеру испортить стиль?

Answer 1

вы можете сбросить ваш button

так:

button, button:active, button:focus{ 
 
    border: 0; 
 
    outline: 0; 
 
    cursor: pointer; 
 
    margin: 0; 
 
    padding: 0; 
 
    background: none 
 
}

<button>test button as a link</button>

Answer 2

Это работает для удаления большей части стайлинга для меня:

button, button:active, button:focus { 
    background-color: transparent; 
    border: none; 
    outline: none; 
    cursor: pointer; 
} 

http://jsfiddle.net/gwxo97ag/1/