Setting border will disable my HTML button. Why?

Question

Hello I am practicing some skills of HTML/CSS. While setting a button in HTML and later styling it via CSS has disabled my "click-able" button. When I checked it, it was un-clickable. While hit and try I commented the border property and button was working and "click-able" but when I turned on the border again, it just became un-clickable again.

Why is this happening? why border is changing its behavior?

Here is the link to Codepen.

https://codepen.io/johnnwick/pen/mdprMba

try commenting the border and you will note that the button will work again. Please let me know why is this happening and how to resolve it?

Answer 1

I had seen your code, it's not disabled.

This is just happening because the border is not changing its color.

Just add this to your css code-
.button-rewatch:active {
border:solid black 5px;
}

It will fix your button.

Hope it helps!

Answer 2

:active is the pseudo element you need.

The border-style are outset and inset.

Demo:

https://code.sololearn.com/WHaJRT7Fjpdb/?ref=app

You could also try

button:hover{}

here are more reading material for you:

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Answer 3

Thank you @Code Infinite with Arnav it worked.

Thanks @Gordon for additional material I'll go through it.