Weird button behaviour

HTML-CSS
1

ok that is the second time this happens to me
Buttons are not clickable anymore…I don’t know if it si something related to my browser/connection or if I made any mistake
this is the link
https://codepen.io/ranran212/pen/ExWPMKy

thanks :slight_smile:

2

They’re clickable to me but if you want to make sure they’re clickable,
Try using :active pseudo-class on your button
Like so:

button:active {
  background-color: blue; //The button will have a blue background color once it's clicked
}

You can read more about :active pseudo-class here

3

I found out that they become non clickable if i set
button {
border: none;
}

however I found some projects where border was set to one and buttons were clickable
so, which css rule can I set in order to have a clickable button but with no border?

4

I think border: none; is what you’re looking for. (unless I’m missing something)

5

yes, but as i stated earlier, if i set border: none, the button becomes unclickable :frowning:

6

CSS only changes appearance, it has no impact on the button’s functionality.

1 Like
7

try this
https://codepen.io/ranran212/pen/eYvpJbx?editors=1111

it become unclickable with
button {
border: none;
}

8

I don’t know what you mean by unclickable? I think you are conflating the visuals with what is actually happening.

const buttons = document.querySelectorAll("button");

buttons.forEach((btn) => {
  btn.addEventListener("click", ({ target }) => {
    console.log(target);
    console.log(target.parentElement);
  });
});
9

ok, honestly I had not tried the functionality because just visually I cannot accept that :frowning:
si, I suppose that the only way to get rid of the border and visually have something that simulates the clicking is by adding a pseudo-class, correct?

10

Yes, you can apply whatever styles you want to the active state of the button.

11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.