Ask coding questions

← Back to all posts
Do you know how to code buttons
ZakMcCall (1)

Thx in advance. I need this for a light mode and a dark mode

Comments
hotnewtop
tussiez (1677)

Here's a button:

HTML

<button class="light_mode" onclick="alert('rick roll')">You can trust this button</button>

CSS

.light_mode button {
border: 1px solid black;
background-color: white;
color: black; /* override browser default style */
}

.dark_mode button {
border: 1px solid white;
background-color: #333;
color: white;
}

JavaScript: (toggles light/dark mode)

let currMode = 'light_mode';
const changeMode = () => {
let gr = document.getElementsByClassName(currMode);
currMode = currMode == 'light_mode' ? 'dark_mode' : 'light_mode'; // change modes
for(let ele of gr) { // iterate over each element with a specified theme
ele.setAttribute('class', currMode); // change style
}
}
OldWizard209 (1631)

The simplest way to create a button in HTML, would be using an anchor tag, but change its look using CSS. So here would be the HTML:

<a class="link" href="https://replit.com/~">Button</a>

Embed this HTML in a HTML boilerplate.

And here is the CSS:

.link:link, .link:visited {
  background-color: #0de1e9;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

.link:hover, .link:active {
  background-color: 0de1e9;
}

This is the fastest way to make a working button. But this is not enough. To make an actual button use a <button> tag.

Bookie0 (6386)

If you want a light and dark theme, you can use CSS variables with different "themes", and you can use JS to toggle between them.

Check this out for more

And for buttons just use the <button></button> tag.

Learn more here

Good luck! :D

Coder100 (18922)

well buttons are super easy, they are HTML!

<button></button>

now for the hard part, making them interactive requires js.