Between the border and background color there are some white pixels showing. The background does not fill the buttons background 100% which is annoying to look at.
image of button
I’ve played around with sizes of the button::before but it doesn’t seem to help.
button {
border: 2px solid #000;
border-radius: 100px;
overflow: hidden;
color: #fff;
pointer-events: auto;
cursor: pointer;
background: #e7e7e7;
padding: 1.5rem 3rem;
margin: 0;
position: relative;
display: inline-block;
}
button p {
padding: 0;
margin: 0;
font-family: "ClashGrotesk-Medium";
font-size: 3em;
position: relative;
mix-blend-mode: difference;
}
button::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 100px;
content: "";
background: #000;
transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
}
button:hover::before {
transform: translate3d(0, -100%, 0);
}<button><p>Lorem Ipsum</p></button>
New contributor
Silas Kierstein is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.