How to change the background color of Button in javascript

Question

I have following code, I'm using to display my custom dialog box. But the the color of button is by default gray. How do I add background color and increase or decrease it's size or make it round in javascript.

document.getElementById('dialog-box-foot').innerHTML = '<button onclick="Alert.ok()">OK</button>';

Answer 1

Using Javascript you can change the background color or size:

        document.getElementById("mybutton").style.background='#000000';
         // size
        document.getElementById("mybutton").style.height='50px';
        document.getElementById("mybutton").style.width='50px';
        // radious
        document.getElementById("mybutton").style.borderRadius = "25px";

Answer 2

You need to edit the CSS of your element:

#dialog-box-foot {
    background-color: #ee6e73;  // Background color
    border-radius: 4px;         // Round
    font-size: 16px;            // Font size
}

Here you can find some example : https://www.w3schools.com/css/css3_buttons.asp

Answer 3

 var elem = document.getElementById('dialog-box-foot') //While inserting elem.innerHTML = '<button style="background:yellow;height:30px;width:30px;border-radius:50%;" onclick="Alert.ok()">OK</button>'; //After inserting var buttonelem = document.getElementById('buttonelem'); buttonelem.style.background = "aliceblue"; buttonelem.style.height = "50px"; buttonelem.style.width = "50px"; buttonelem.style.borderRadius = "50%"; 

 <div id="dialog-box-foot"></div> <button id="buttonelem">OK</button> 

Answer 4

If, is this what you are looking for:

 document.getElementById('dialog-box-foot').innerHTML = "<button class='mybtn' onclick=\\"alert(\\'ok\\')\\">OK</button>"; 

 .mybtn{ background:#00f; outline:none; border:none; padding:10px; border-radius:3px; color:#fff; cursor:pointer; } .mybtn:hover{ background:#0f0; } .mybtn:active{ background:#f00; } 

 <div id="dialog-box-foot"></div> 

Answer 5

if you have multiple css style , you can try this . get advantage of cssText property .

  document.getElementById("dialog-box-foot").style.cssText = "background-color:#f00;left:10%;top:30%";