Why this CSS button is not 'clickable'?

Question

So I created a button in html and then styled it in css, but it's not working, I can't click on it.

button.blue {
  background-color: #00FFF0;
  border-radius: 12px;
  border: none;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  opacity: 0.6;
}

<button class="blue" href="www.google.com">Get The App</button>

I tried many different combinations, sometimes button just get default html look, sometimes nothing happend. Can someone point me how to create my own custom button? I would appreciate any help.

refer to this answer https://stackoverflow.com/questions/2906582/how-to-create-an-html-button-that-acts-like-a-link — DaFois, Nov 21 '18 at 12:38
and the *click* should do what? a button alone will do nothing — Temani Afif, Nov 21 '18 at 12:41
Seems to click fine for me - please can you clarify what you expect it to do when you click it — Pete, Nov 21 '18 at 12:43
@Pete I expect that it got 'effect of click', this little push when clicked or at least hand cursor when hovered — adiush, Nov 21 '18 at 13:19
I think i got it. I added darker color on :hover and cursor: pointer. Now it looks like a button. Thanks for all answers guys — adiush, Nov 21 '18 at 13:21
[Have a look at the styles in this answer (not the accepted one)](https://stackoverflow.com/questions/8357058/how-to-make-a-href-link-look-like-a-button#answer-28491102) it shows how to get that "click" effect — Pete, Nov 21 '18 at 13:25

Studio KonKon · Accepted Answer · 2018-11-21T14:08:57.340

A button element can't use a href attribute. Use an A (anchor) element instead and style it to look like a button as you've just done.

Use the :hover :active pasuados to change the style when a user hovers or clicks the button.

.btn-blue {
  background-color: #00FFF0;
  border-radius: 12px;
  border: 1px transparent solid; /* transparent border */
  color: black;
  padding: 13px 30px; /* remove 2px as we are now using the border */
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  opacity: 0.6;
  cursor: pointer;
}

.btn-blue:hover
{
  opacity: 1;
  background-color: #00EEE0;
  border: 1px #99ccff solid;
}

.btn-blue:active
{
  background-color: #00CCC0;
  border: 1px #000000 solid;
}

<a class="btn-blue" href="#">Get The App</a>

Now simply replace some of my code above with whatever styles you want.

UPDATE:

If you need a button with a fixed height check this code:

.btn-blue {
  background-color: #00FFF0;
  border-radius: 12px;
  
  /* add a transparent border or use #00FFF0 for color */
  border: 1px transparent solid;
  
  /* Allows us to include the padding and border in an element's total width and height. */
  box-sizing: border-box;
  
  color: black;
  
  /* remove the top and bottom padding, we don't need them */
  padding: 0px 30px;
  
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  
  font-family: Helvetica, Arial;
  
  /* Use this to set a fixed height so the height won't changes */
  height: 35px;
  
  /* Set to same as height so the text is centred in the middle. You can change the font-size or family without the box getting bigger */
  line-height: 35px;
  
  /* So that the box doesn't shrink or expand if the font-size changes on hover like in this example. */
  min-width: 150px;
  
  opacity: 0.6;
  cursor: pointer;
}

.btn-blue:hover
{
  font-size: 14px;
  font-weight: bold;
  opacity: 1;
  background-color: #00EEE0;
  border: 1px #99ccff solid;
}

.btn-blue:active
{
  background-color: #00CCC0;
  border: 1px #000000 solid;
}

<a class="btn-blue" href="#">Get The App</a>

I would normally advise against using an `onclick` event on a `button` and use the `A` tag instead. While it is 2018 and almost every browser has it, some people have JavaScript disabled either for privacy, security, their organisation doesn't allow it or whatever reason and all you are using it for is a link. Using JavaScript would mean the link won't work if it's disabled. — Studio KonKon, Nov 21 '18 at 13:08
...and you lose basic link functionality like ctrl-click to open in new tab, or right-click and copy URL, which people use all the time with or without JavaScript. — JJJ, Nov 21 '18 at 13:09
that's some way, but strange thing happen when I do it - my button is getting removed to border bottom of navbar (it should be centered right, but its getting moved down to bottom border of nav)... — adiush, Nov 21 '18 at 13:09
Probably because I added the border in this code which adds an extra 2px (1px for top and bottom, left and right) so change the padding to `padding: 13px 30px;` other than that we will need to know what navbar you are using, like is it bootstrap? or something custom with a fixed height withh css? see if changing the padding works. — Studio KonKon, Nov 21 '18 at 13:41

imran · Answer 2 · 2018-11-21T12:50:32.040

0

Button don't have a href attribute. you can use <a href="#" > Click Me </a> Element.(if you reference any page or link) Or You can use <button onClick="anyFunction"> Cick me </button> button with event handler which expect a function.

edited Nov 21 '18 at 12:50

answered Nov 21 '18 at 12:44

imran

177
1
7

Divya Agrawal · Answer 3 · 2018-11-21T12:50:38.963

0

Use this and use css so that it looks like button, because button don't have a href attribute.

<a href="#" class="blue">Get The App</a>

edited Nov 21 '18 at 12:50

answered Nov 21 '18 at 12:48

Divya Agrawal

300
1
2
15

score 0 · Answer 4 · answered Nov 21 '18 at 12:51

You should not use href in button element. You can use onclick like this.

<html lang="en">
<head>
 <style type="text/css">
  button.blue {
        background-color: #00FFF0;
        border-radius: 12px;
        border: none;
        color: black;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 12px;
        opacity: 0.6;  
      }
</style>
</head>
<body>
   <button class="blue" onclick="alert('working')">Get The App</button>
</body>
</html>

You can find all html element tutorial in here

score -1 · Answer 5 · answered Nov 21 '18 at 12:50

-1

border: none; makes the problem

please try to give color to the border

eg.

<button class="blue">Get The App</button>

<style>
button.blue {
background-color: #00FFF0;
border-radius: 12px;
border-color: #00FFF0;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
opacity: 0.6;  }
</style>

answered Nov 21 '18 at 12:50

Mahesh Shenoi

1
1

Are you seriously saying that the difference between a clickable and non-clickable button is its border color? – JJJ Nov 21 '18 at 13:01
No i mean the button feels not clickable because border:none; – Mahesh Shenoi Nov 21 '18 at 13:05
nice try, but when i remove it, it changes its look – adiush Nov 21 '18 at 13:05
I'm pretty sure the question is about the button not working as a link, not how it "feels". – JJJ Nov 21 '18 at 13:08

Why this CSS button is not 'clickable'?

5 Answers5