Color button using css html

Question

i have code html

<button onclick=location=URL>Refresh</button>

how is code given css color?for example as below

CSS code `

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 8px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button2 {background-color: #008CBA;} /* Blue */

` in html

<button class="button button2">Refresh</button>

but if implemented in this code

<button onclick=location=URL>Refresh</button>

an error occurs

can anyone help me with this?

Answer 1

you must change 2 things:

• atribute onclick: you mus have this: " around the javascript. like

<button onclick="location=URL" >Refresh</button>

• if you like to use style with .button, you must add atribute class="button". like this:

<button onclick="location=URL" class="button" >Refresh</button>   

or, you can use other think in style: instead of .button{ ... }, use button{ ... }.

Answer 2

I can't see how you are using the onclick. but something is wrong here:

<button onclick=location=URL>Refresh</button>

Parenthesis are missing. Maybe try something along the line of this

<button onclick="location.href='../'">

Answer 3

Your onclick attribute is wrong. You need to use window.location.href or window.location.reload(); Here is the documentation : https://developer.mozilla.org/en-US/docs/Web/API/window/location.

Also, if you want to add css to html and you don't know how to do, you can check this https://www.w3schools.com/CSS/css_howto.asp

Here is a working code :

.button {
    background-color: #4CAF50;/* Green */
    border: none;
    color: white;
    padding: 8px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.button2 {
    background-color: #008CBA;
}

<button class="button button2" onclick="window.location.href='https://stackoverflow.com/questions/74922452/color-button-using-css-html';">Refresh</button>

Answer 4

onclick is deprecated and hard to read. Consider to use a listener to your button!

The code to refresh a page is window.location.reload();

    let btn_01;
    document.addEventListener("DOMContentLoaded", onReady);
    function onReady(){
        btn_01 = document.getElementById("button_1");
        btn_01.addEventListener("click",click_1);
    }
    function click_1(){
        window.location.reload();
    }

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 8px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.button2 {background-color: #008CBA;} /* Blue */

<button id="button_1" class="button button2">Refresh</button>