Cannot make the CSS button clickable

Question

That's my first try:

.pricingTable-firstTable_table__getstart {
  color: white;
  background-color: #71ce73;
  margin-top: 30px;
  border-radius: 5px;
  cursor: pointer;
  padding: 15px;
  box-shadow: 0px 3px 0px 0px #66ac64;
  letter-spacing: 0.07em;
  transition: all 0.4s ease;
}

<div class="pricingTable-firstTable_table__getstart" href="https://website.com">JOIN</div>

It doesn't click, and doesn't change anything, I appreciate the help

You want the div on clicking to go to the href you specified? — Martin
– Martin, Commented Oct 15, 2019 at 7:54
@Martin, correct, Im not a devoloper but I get the logic, :) — Yassine
– Yassine, Commented Oct 15, 2019 at 7:58
You should use the correct elements and learn how to style them properly - add display:inline-block to your styles — Pete
– Pete, Commented Oct 15, 2019 at 7:59

Martin · Accepted Answer · 2019-10-15 07:55:43Z

2

The usual way to achieve this is wrapping your div inside an a tag:

<a href="https://website.com">
    <div class="pricingTable-firstTable_table__getstart">JOIN</div>
</a>

You could also solve this (less elegantly imo) using an onclick event in JavaScript:

<div class="pricingTable-firstTable_table__getstart" onclick="window.location.href='https://website.com';">JOIN</div>

answered Oct 15, 2019 at 7:55

Martin

16.5k1 gold badge33 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

FoXXXiT · Accepted Answer · 2019-10-15 08:35:25Z

1

If you want an anchor link to look like a button. Style it something like this:

Css

.link-button {
  padding: 5px 10px 5px 10px;
  border: 1px solid blue;
  background-color: lightblue;
}

.link-button:hover {
  background-color: blue;
  cursor: pointer;
}

And the markup

<a class="link-button">Anchor as button</a>

But I prefer to use buttons for operations, and show navigation as anchors. Because people recognize them for that.

edited Oct 15, 2019 at 8:35

FoXXXiT

436 bronze badges

answered Oct 15, 2019 at 8:09

Jens Alenius

1,9412 gold badges17 silver badges20 bronze badges

Collectives™ on Stack Overflow

Cannot make the CSS button clickable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related