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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
I have these white artifacts on the button.
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!
CodePudding user response:
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>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
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>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>