I have to make a button with a ::before
hidden which shows on :hover
. This animation is working great on Chrome, IE and Firefox, but i have a weird issue on Safari.
Overflow:hidden is working but without the border radius.
You should run the fiddle in safari to see this issue.
Thanks !
.btn{
border-radius: 3rem;
cursor: pointer;
display: inline-block;
font-size: 15px;
font-weight: 400;
font-family: arial;
overflow: hidden;
position: relative;
padding: 0.8rem 2.5rem;
text-decoration: none;
}
.btn-primary{
background-color: blue;
border-color: blue;
color: white;
}
.btn-primary::before{
background-color: deeppink;
border-radius: 50%;
content: '';
color: white;
height: 100%;
left: 100%;
margin: 0;
position: absolute;
top: 0;
transform-origin: 100% 50%;
transform: scale3d(1, 1.4, 1);
transition: all 300ms cubic-bezier(0.7,0,0.9,1);
width: 20%;
}
.btn-primary:hover::before{
transform: scale3d(1, 5, 1);
width: 110%;
left: -2%;
z-index: 0;
}
.btn-primary span{
position: relative;
z-index: 1;
}
<a href="#" class="btn btn-primary">
<span>Button primary</span>
</a>