Javascript - tworzenie elementów do klas.

Witam,
Zrobiłem prostą stronkę, tylko nie potrafię tego zrobić tak, aby guzik z value = aa był tego samego stylu co guzik value=value. Czego mi brakuje w tym kodzie, aby js tworzył ten guzik wg. stylu z css'a?

<style>
.button{
	background:white;
	border:2px solid black;
	width:200px;
	text-align:center;
	height:30px;
	margin-top:2px;
}
.button:hover{
	background:RGBa(56,56,56,0.5);
}
</s`code>`
<script type="text/javascript">
	document.write("<input type='button' class='button'  onclick=ab() value='Value'><br>");
function ab(){
	document.write("<div id='box'>");
	document.write("<input type='button' class='button'  onclick=aba() value='aa'><br>");
	document.write("</div>");
}

</script>

Nie powinieneś w ten sposób dołączać elementów do dokumentu!
document.write() wywołanie po tym jak strona się załaduje (a w momencie kliknięcia, gdy odpalany jest Twój handler ab strona już jest załadowana) czyści dokument! Skoro czyści dokument, to usuwa też Twój tag <style />.

Prawidłowy sposób dodawania i tworzenia elementów to używanie document.createElement oraz domNode.appendChild.

JSFiddle

var body = document.body;

function ab() {
	var button = createButton();
	body.appendChild(button);
}

function createButton() {
  var button = document.createElement('input');
  button.type = 'button';
  button.className = 'button';
  button.onclick = ab;
  button.value = 'Value';
  return button;
}

document.onreadystatechange = function () {
    ab();
};