::after pseudo element overflowing element, using overflow:hidden; has extra space

I am trying to make a button with a hover effect and ::after pseudo class is involved.

The ::after pseudo-class covers 100% of the button's height and width, even more just to be sure; then when :hover, the ::after element's width will shrink to 0.

My problem is that I can't precisely size the ::after element, so I simply added overflow: hidden; to the button so that it will cut out the overflowing parts of the ::after pseudo-element. But it cropped a little too much, leaving one pixel between the border and the ::after pseudo-element covering the button.

.btn {
  font-family: inherit;
  background-color: transparent;
  text-decoration: none;
  padding: 1rem 1.5rem;
  font-size: 2.3rem;
  color: #fff;
  border: solid 3px #EF9C43;
  width: 50%;
  border-radius: 100rem;
  text-transform: uppercase;
  font-weight: 400;
  transition: color 0.3s, transform 0.3s, box-shadow 0.3s;
  position: relative;
  box-shadow: 1rem 1rem 4rem rgba(31, 31, 31, 0.5);
  z-index: 5;
  backface-visibility: hidden;
  overflow: hidden;
}

.btn::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  background-color: #EF9C43;
  width: 110%;
  height: 110%;
  z-index: -1;
  transition: width 0.3s;
}

.btn:hover {
  font-weight: 600;
  color: #1f1f1f;
  transform: translateY(-0.3rem);
  box-shadow: 1rem 1.5rem 2rem rgba(31, 31, 31, 0.6);
}

.btn:active {
  transform: translateY(-0.1rem);
  box-shadow: 1rem 1.25rem 2.5rem rgba(31, 31, 31, 0.5);
}

.btn:hover::after {
  width: 0;
}
<button class="btn btn--orange">Hire our services</button>

Here is the codepen of my case: https://codepen.io/CoolBoiDave/pen/bGLdwxE

Any help would be appreciated! (PS: sorry for bad english)

1 answer

  • answered 2022-05-04 10:17 Roko C. Buljan

    I don't know why would you use an ::after pseudo element when all you need is to
    transition a background-image.
    Also, you could use an inset box-shadow instead of border.

    .btn {
      background-color: transparent;
      padding: 1rem 1.5rem;
      font: 400 2.3rem sans-serif;
      text-transform: uppercase;
      color: #fff;
      border: 0;
      border-radius: 4rem;
      font-weight: 400;
      transition: color .3s, background-position .3s, box-shadow .3s;
      box-shadow: 0 1rem 4rem rgba(0,0,0,0.3), inset 0 0 0 3px #EF9C43;
      background-image: linear-gradient(90deg, rgba(255,145,0,1) 50%, rgba(0,0,0,0) 50%);
      background-size: 200%;
    }
    
    .btn:hover,
    .btn:active {
      background-position: 100%;
      color: #1f1f1f;
      box-shadow: 0 1.5rem 2rem rgba(0,0,0,0.3), inset 0 0 0 3px #EF9C43;
    }
    <button class="btn btn--orange">Hire our services</button>

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum