Why do all my buttons turn green when I use coloredButton(function,color) function?

Question

When I use the following code, all buttons are green. Why? and how do I fix this? code:
```
var coloredButton = function coloredButton(func, color="white") {
this.func = func;
this.color = color;
document.write("<style>input {background-color:"+color+"; color:"+color+"; font-size:200%;}</style>");
document.write("<input type=\"button\" value=\"----------\" onclick=\""+func+"\"/>");
}
var BA = new coloredButton("alt1()","red");
var BB = new coloredButton("alt2()","blue");
document.write("<br/>");
var BC = new coloredButton("alt3()","yellow");
var BD = new coloredButton("alt4()","green");
function alt1() {
alert("hi");
}
function alt2() {
alert("bye");
}
function alt3() {
alert("enter");
}
function alt4() {
alert("exit");
}
```

Answer 1

I think it's happening because last style overrides previous styles' properties
It works correctly when you write it like this:
document.write('<input style="background-color:' + color + '; color:' + color + '; font-size:200%;" type="button" value="----------" onclick="' + func + '"/>');