[SOLVED] How to round borders on rectangle button on hover

How to round borders on rectangle button on hover

I'm trying to round the corners of a button on hover by using border-radius. However, when I do so the corners are no longer in the clickable/hoverable area, so when you hover over any of the corners, the button predictably starts to flicker.

Is there a way around this? I'd prefer to avoid having to add another HTML element and handle this only with CSS, if possible.

I'm using TailwindCSS and have a play set up here.

Solution

You can use pseudo-elements (::before / ::after) to have clickable areas that do not match the actual shape of an element.

My preference is to use the pseudo-element as the clickable area, visible in semitransparent cyan in this example:

button {
  position: relative;
  background: transparent;
  border: 0;
  color: white;
  background: red;
  height: 64px;
  padding: 0 64px;
  border-radius: 8px;
  transition: border-radius linear 300ms;
}

button:hover {
  border-radius: 32px;
}

button::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 255, 255, .125);
}

<button>Click me!</button>

But you can also do it the other way around and use the pseudo-element to make animation / transition of the border-radius:

button {
  position: relative;
  background: transparent;
  border: 0;
  color: white;
  height: 64px;
  padding: 0 64px;
}

button::before {
  content: "";
  position: absolute;
  background: red;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  border-radius: 8px;
  transition: border-radius linear 300ms;
}

button:hover::before {
  border-radius: 32px;
}

<button>Click me!</button>