The Whole CSS Button Is Not Clickable

Question

I found 2 issues on this CSS code -

The whole button is not clickable.
The text of the button always a different color than what I set. For Example, I set text color as white but still it is in a different color.

.visitbutton {
  line-height: 1.6;
  font-style: normal;
  font-size: 20px;
  text-align: center;
  color: white;
  background-color: #34495E;
  text-decoration: none;
  font-weight: bold;
  font-family: Arial, sans-serif;
  border: solid 0 #e3edf4;
  border-bottom: 2px solid #AEB6BF;
  border-radius: 4px;
  padding: 16px 40px;
}

<div class="visitbutton">
  <a href="https://google.com" target="_blank">Visit Now</a>
</div>

You have padding on the div so even if you make the anchor a block level element it still won't take up the entire div — j08691, Jul 26 '20 at 19:35

score 2 · Answer 1 · edited Jul 26 '20 at 19:46

2

The reason it's not working is that <a> tag is not a button, it defines a hyperlink. Using a button would be a better alternative to this.

To have the font colour white you have to target that element or its selector.

Here's the correction to your code.

.visitbutton {
  line-height: 1.6;
  font-style: normal;
  font-size: 20px;
  text-align: center;
  color: white;
  background-color: #34495E;
  text-decoration: none;
  font-weight: bold;
  font-family: Arial, sans-serif;
  border: solid 0 #e3edf4;
  border-bottom: 2px solid #AEB6BF;
  border-radius: 4px;
  padding: 16px 40px;
}

<div>
  <a href="https://google.com" class="visitbutton" target="_blank">Visit Now</a>
</div>

edited Jul 26 '20 at 19:46

Abhishek Bhagate

5,583
3
15
32

answered Jul 26 '20 at 19:35

Bhavesh Lohana

376
3
5

It shows like this on the shopify page. https://i.imgur.com/spJAWDu.png – Mertz Jul 26 '20 at 19:59
@Mertz It might be because another element with an absolute/fixed position is overlapping. – Bhavesh Lohana Jul 26 '20 at 20:01
Any suggestion for that? – Mertz Jul 26 '20 at 20:23
@Mertz May I ask where is the button inserted in the page? Is there a way I could check the implementation? – Bhavesh Lohana Jul 26 '20 at 20:32

score 1 · Answer 2 · answered Jul 26 '20 at 19:34

1

1: Put the button div inside the a-tag (<a ...><div>Visit now</div></a>).

2: The reason it's a different color is that anchor tags (<a>) have implicit styling. Simply ovveride it manually to fix it, but you have to override it in the a-tag or lower. So it might be fixed together with the clickability!

answered Jul 26 '20 at 19:34

Sebastian

1,321
9
21

for the information, we should not put a block element inside an inline element, see https://stackoverflow.com/questions/1714121/block-level-elements-inside-inline-elements – mohcine nazrhan Jul 26 '20 at 19:44

luek baja · Answer 3 · 2020-07-26T19:40:36.810

The reason the whole button does not act as a link is because it is a div. If you want it to be a link, and set the colors of the link then you need to style it directly. Right now you are just styling the div around it. Here is an example that uses some JavaScript: The second button may not open, as your browser considers it a pop-up, use a link instead.

button {
  line-height: 1.6;
  font-style: normal;
  font-size: 20px;
  text-align: center;
  color: white;
  background-color: #34495E;
  text-decoration: none;
  font-weight: bold;
  font-family: Arial,sans-serif;
  border: solid 0 #e3edf4;
  border-bottom: 2px solid #AEB6BF;
  border-radius: 4px;
  padding: 16px 40px;
}

<button onclick="window.location.href='https://example.com'">Changes the current page</button>
<br />
<button onclick="window.open('https://example.com')">Opens in a new tab</button>

Abhishek Bhagate · Answer 4 · 2020-07-26T19:42:48.070

In you case, the whole area is not clickable because by default only the text inside a is a clickable link. You need to make changes to css of a as follows for desirable results-

.visitbutton {
  line-height: 1.6;
  font-style: normal;
  font-size: 20px;
  text-align: center;
  color: white;
  background-color: #34495e;
  text-decoration: none;
  font-weight: bold;
  font-family: Arial, sans-serif;
  border: solid 0 #e3edf4;
  border-bottom: 2px solid #aeb6bf;
  border-radius: 4px;
}

.visitbutton a {
  display: block;
  text-decoration: none;
  color: white;
  padding: 16px 40px;
}

<div class="visitbutton">
  <a href="https://google.com" target="_blank">Visit Now</a>
</div>

I have also moved the padding from .visitbutton to .visitbutton a so that the whole area is clickable link.

Also, you could use a button instead of using div which would probably a better option here -

.visitbutton {
  line-height: 1.6;
  font-size: 20px;
  color: white;
  background-color: #34495e;
  font-weight: bold;
  font-family: Arial, sans-serif;
  border: solid 0 #e3edf4;
  border-bottom: 2px solid #aeb6bf;
  border-radius: 4px;
  width: 100%;
}

a {
  text-decoration: none;
  color: white;
  padding: 16px 40px;
}

<button class="visitbutton">
  <a href="https://google.com" target="_blank">Visit Now</a>
</button>

It works but why does the button takes whole place (width) size? — Mertz, Jul 26 '20 at 19:52
@Mertz I have added css for `width:100%`. You could remove it if you don't want full width button — Abhishek Bhagate, Jul 26 '20 at 19:53
add 100% won't work here but you could try 100vw. look at solution below,changing the display to block — DCR, Jul 26 '20 at 19:59
@DCR It's working. Also, the second case is where I have shown to use button instead of div tag. The first case, I have used block as well for `` — Abhishek Bhagate, Jul 26 '20 at 20:01

DCR · Answer 5 · 2020-07-26T19:54:28.633

block elements by default take up 100% of the space

.visitbutton,
a {
  line-height: 1.6;
  font-style: normal;
  font-size: 20px;
  text-align: center;
  color: white;
  background-color: #34495E;
  text-decoration: none;
  font-weight: bold;
  font-family: Arial, sans-serif;
  border: solid 0 #e3edf4;
  border-bottom: 2px solid #AEB6BF;
  border-radius: 4px;
  padding: 16px 40px;  
  display: block;
}

<div class="visitbutton">
  <a href="https://stackoverflow.com">Visit Now</a>
</div>

score 0 · Answer 6 · answered Jul 26 '20 at 19:39

See, there are some things to be noted, if you want a button, use button tag and the different color is because it is a link to fix it, you can use this code:

.visitbutton {
  line-height: 1.6;
  font-style: normal;
  font-size: 20px;
  text-align: center;
  background-color: #34495E;
  text-decoration: none;
  font-weight: bold;
  font-family: Arial,sans-serif;
  border: solid 0 #e3edf4;
  border-bottom: 2px solid #AEB6BF;
  border-radius: 4px;
  padding: 16px 40px;
}

.visitbutton a{
  text-decoration: none;
  color: white;
}

<button class="visitbutton">
  <a href="https://google.com" target="_blank">Visit Now</a>
</button>

The Whole CSS Button Is Not Clickable

6 Answers6