My button that has to send you to a second html page doesn't work

Question

At first, I linked it in the button tag expecting it to work; it didn't so I wrapped it in a form, which also didn't work. Then, I tried onclick but that also didn't work. Also hover:pointer; doesn't work either.

Expected: Pointer cursor when hovering over the button, and send the user to contact.html (stored locally) when the button is pressed.

<button class="contact" onclick="document.location='contact.html'">
        CONTACT
</button>


    width: 369px;
    height: 71px;
    border: 0;
    padding: 0;    
  
    background: #00d1ff;
    border-radius: 12px;
    border-color: 20px white;
  
    font-family: Alata;
    font-style: normal;
    font-weight: normal;
    font-size: 30px;
    line-height: 71px;
    text-align: center;
    letter-spacing: 0.3em;
    margin: 0px 0px 0px 0px;
    color: #ffffff;
  
  }

  button:hover {

    cursor: pointer;

  }

Codepen: https://codepen.io/HasanTheSyrian_/pen/mdrmGNR

Try `location.href='contact.html'` instead. – AKX Dec 17 '20 at 10:41 — AKX, Dec 17 '20 at 10:41

Wais Kamal · Accepted Answer · 2020-12-17T10:44:40.327

3

You should use document.location.href:

button {
  width: 369px;
  height: 71px;
  border: 0;
  padding: 0;
  background: #00d1ff;
  border-radius: 12px;
  border-color: 20px white;
  font-family: Alata;
  font-style: normal;
  font-weight: normal;
  font-size: 30px;
  line-height: 71px;
  text-align: center;
  letter-spacing: 0.3em;
  margin: 0px 0px 0px 0px;
  color: #ffffff;
}

button:hover {
  cursor: pointer;
}

<button class="contact" onclick="document.location.href='contact.html'">
        CONTACT
</button>

edited Dec 17 '20 at 10:44

answered Dec 17 '20 at 10:41

Wais Kamal

5,858
2
17
36

But you still have `document.location` written. – s.kuznetsov Dec 17 '20 at 10:44
Thanks! Make sure to have a nice day, Kamal. – Hasan Al-Aref Dec 17 '20 at 11:07
Glad to help! Make sure you put on that green tick :) – Wais Kamal Dec 17 '20 at 11:07

score 1 · Answer 2 · answered Dec 17 '20 at 10:44

1

I can recommend you simply use an approach similar to bulma: https://versions.bulma.io/0.7.0/documentation/elements/button/

Essentially, using an tag and style it to look like a button. This way you have full control.

If you do not want to use bulma because of its complexity, this has been done here: Styling an anchor tag to look like a submit button

answered Dec 17 '20 at 10:44

Lithium

69
3

Nice first answer :) – Zsolt Meszaros Dec 17 '20 at 11:32

My button that has to send you to a second html page doesn't work

2 Answers2