Why this CSS button is not 'clickable'? [duplicate]

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 stackoverflow.com/questions/2906582/… — DaFois
– DaFois, Commented Nov 21, 2018 at 12:38
and the click should do what? a button alone will do nothing — Temani Afif
– Temani Afif, Commented Nov 21, 2018 at 12:41
Seems to click fine for me - please can you clarify what you expect it to do when you click it — Pete
– Pete, Commented Nov 21, 2018 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
– adiush, Commented Nov 21, 2018 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
– adiush, Commented Nov 21, 2018 at 13:21

Studio KonKon · Accepted Answer · 2018-11-21 14:08:57Z

4

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>

edited Nov 21, 2018 at 14:08

answered Nov 21, 2018 at 12:43

Studio KonKon

7906 silver badges15 bronze badges

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

4 Comments

Studio KonKon Over a year ago

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.

JJJ Over a year ago

...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.

adiush Over a year ago

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)...

Studio KonKon Over a year ago

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.

imran · Accepted Answer · 2018-11-21 12:50:32Z

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, 2018 at 12:50

answered Nov 21, 2018 at 12:44

imran

1871 silver badge7 bronze badges

Comments

Divya Agrawal · Accepted Answer · 2018-11-21 12:50:38Z

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, 2018 at 12:50

answered Nov 21, 2018 at 12:48

Divya Agrawal

2851 gold badge2 silver badges15 bronze badges

Comments

Isa Ataseven · Accepted Answer · 2018-11-21 12:51:39Z

0

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

answered Nov 21, 2018 at 12:51

Isa Ataseven

1861 silver badge12 bronze badges

Comments

Mahesh Shenoi · Accepted Answer · 2018-11-21 12:50:37Z

-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, 2018 at 12:50

Mahesh Shenoi

11 bronze badge

4 Comments

JJJ Over a year ago

Are you seriously saying that the difference between a clickable and non-clickable button is its border color?

Mahesh Shenoi Over a year ago

No i mean the button feels not clickable because border:none;

adiush Over a year ago

nice try, but when i remove it, it changes its look

JJJ Over a year ago

I'm pretty sure the question is about the button not working as a link, not how it "feels".

Collectives™ on Stack Overflow

Why this CSS button is not 'clickable'? [duplicate]

5 Answers 5

4 Comments

Comments

Comments

Comments

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

Comments

4 Comments

Linked

Related