Pfthb

On my project I use JS Buttons a lot, I can't find a way to add CSS to them. Can you help?

leftBtn = document.createElement('button');
leftBtn.innerText = "<";
rightBtn = document.createElement('button');
rightBtn.innerText = ">";
fireBtn = document.createElement('button');
fireBtn.innerText = "*";

Using CSS classes to change buttons:
<button class="btn">default button</button>

Class used

You could use this code to add a css class to each button:

 leftBtn.className = "leftOne";
 rightBtn.className = "rightOne";
 fireBtn.className = "fireOne";

Then you can use regular css to style them.

You could add a class to your buttons, and then add any styling in CSS:

leftBtn.className = "class_name"

You probably need to use the className to your Javascript:

EXAMPLE:

leftBtn.className = "name";

Hope this helps :)

you can use for example :

leftBtn.style.color = "blue";

Lear more about in https://developer.mozilla.org/es/docs/Web/API/HTMLElement/style

In general, there are two main ways to do that.

The first one using inline styles, just keep in mind that inline style has the highest precedence in a document.

elt.style.color = '...'

or

elt.setAttribute('style', '...')

More info here

The second is by using the class name. You can simply define a class name and write CSS for this class name.

element.className.add = 'your-class-name'

then

.your-class-name color: red 

In a second way, you can manage class names by using methods like add, remove, toggle

More info here

Just do something like this

leftBtn.style.marginLeft = '20px'
rightBtn.style.marginLeft = '20px'

I guess it

var leftBtn = document.createElement('button');
leftBtn.innerText = "<";
leftBtn.className = "test_style"; // Set class name
leftBtn.style.color = "#000"; // You can also set style properties inline

...

Here is a playground:

https://jsfiddle.net/u5hojsgb/