overflow hidden and border radius artifacts

user_3952435 0
Viewed 202

I have a rounded button which adds a slide over effect on hover:

a.swipe {
  /** Things I tried **/
  mask-image: radial-gradient(white, black);
  -webkit-mask-image: radial-gradient(white, black);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  padding: 12px;
  overflow: hidden;
  background-color: rgb(255, 255, 255);
  border-radius: 9999px;
  box-sizing: border-box;
  color: rgb(0, 0, 0);
  cursor: auto;
  display: flex;
  font-size: 16px;
  font-weight: bold;
  justify-content: center;
  line-height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  position: relative;
  text-align: center;
  text-decoration: none;
  width: 219px;
}

a.swipe.primary:after {
  background-color: rgb(193, 36, 36);
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  right: 0px;
  top: 0px;
  bottom: 0px;
  left: 0px;
  transition-duration: 0.3s;
  transition-property: all;
  transform: matrix(1, 0, -0.21255656167002213, 1, 0, 0);
  width: 0px;
}

a.swipe.primary:hover:after {
  width: 100%;
}
<div style="background-color: rgb(193, 36, 36); padding: 12px;">
  <a href="#" class="swipe primary">
    <span class="z-10">
        Primary Button Black
      </span>
  </a>
</div>

I have these white artifacts on the button.
button with white artifacts

There are already many suggestions to solve this, I tried a lot of them including outline, box-shadow(inner), mask-image, blackface-visibility ... but none of them worked properly. Has anyone a working solution for this problem? Thanks in advance!

safari css html
2 Answers

Create a small overflow with the pseudo element and keep the mask solution. I am using inset which is equivalent to top/right/bottom/left (Is there a css function that allows me to set the values of top, right, bottom, and left for position all in one line?)

a.swipe {
  -webkit-mask: linear-gradient(#000 0 0);
  padding: 12px;
  background-color: rgb(255, 255, 255);
  border-radius: 9999px;
  box-sizing: border-box;
  color: rgb(0, 0, 0);
  cursor: auto;
  display: flex;
  font-size: 16px;
  font-weight: bold;
  justify-content: center;
  line-height: 24px;
  position: relative;
  text-align: center;
  text-decoration: none;
  width: 219px;
}

a.swipe.primary:after {
  background-color: rgb(193, 36, 36);
  content: "";
  position: absolute;
  inset:-1px 100% -1px -1px;
  transition: 0.3s;
  transform: matrix(1, 0, -0.21255656167002213, 1, 0, 0);
}

a.swipe.primary:hover:after {
  inset:-1px;
}
<div style="background-color: rgb(193, 36, 36); padding: 12px;">
  <a href="#" class="swipe primary">
    <span class="z-10">
        Primary Button Black
      </span>
  </a>
</div>

user_86203330 

a.swipe {
  /** Things I tried **/
  mask-image: radial-gradient(white, black);
  -webkit-mask-image: radial-gradient(white, black);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  padding: 12px;
  overflow: hidden;
  background-color: rgb(255, 255, 255);
  border-radius: 9999px;
  box-sizing: border-box;
  color: rgb(0, 0, 0);
  cursor: auto;
  display: flex;
  font-size: 16px;
  font-weight: bold;
  justify-content: center;
  line-height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  position: relative;
  text-align: center;
  text-decoration: none;
  width: 219px;
  transition-duration: 0.3s;
  transition-property: all;
}

a.swipe.primary:after {
  background-color: rgb(193, 36, 36);
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  right: 0px;
  top: 0px;
  bottom: 0px;
  left: 0px;
  transition-duration: 0.3s;
  transition-property: all;
  transform: matrix(1, 0, -0.21255656167002213, 1, 0, 0);
  width: 0px;
  z-index:  -1;
}
a.swipe.primary:hover{
  background-color: transparent;
}
a.swipe.primary:hover:after {
  width: 100%;
}
<div style="background-color: rgb(193, 36, 36); padding: 12px;">
  <a href="#" class="swipe primary">
    <span class="z-10">
        Primary Button Black
      </span>
  </a>
</div>

user_169149360
Related