What I'm trying to achieve is a button like
Once it's done I need to animate on hover. The closest example I could find is this codepen
https://codepen.io/Chester/pen/QPoyjN
The problem is the ::after
that is required to apply a white background on the button
The size of the button might change based on the text length so a solution like the one given here is not valid : Rotate only the Border using CSS
Here's what I got so far, the goal is to keep a similar animation but remove the white background
.background {
width: 600px;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
background-image: url("https://via.placeholder.com/600");
}
.button-file {
display: block;
position: relative;
text-align: center;
z-index: 0;
border-radius: 30px;
max-width: 363px;
max-height: 46px;
border-radius: 30px;
overflow: hidden;
padding: 1rem 2rem;
}
.button-file::before {
content: '';
position: absolute;
z-index: -2;
left: 50%;
top: 50%;
width: 400px;
height: 400px;
border-radius: 30px;
background-repeat: no-repeat;
background-size: 50% 50%, 50% 50%;
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
background-image: linear-gradient(#44a0b0, #44a0b0), linear-gradient(#44a0b0, #44a0b0), linear-gradient(#eeb450, #eeb450), linear-gradient(#eeb450, #eeb450);
transform: translate(-50%, -50%) rotate(11deg);
transition: transform .7s cubic-bezier(1, 0, 0, 1);
}
.button-file:hover::before {
transform: translate(-50%, -50%) rotate(191deg);
}
.button-file::after {
content: '';
position: absolute;
z-index: -1;
left: 3px;
top: 3px;
width: calc(100% - 6px);
height: calc(100% - 6px);
background: #fff;
border-radius: 30px;
}
<div class="background">
<div class="button-file">
<a>En savoir +</a>
</div>
</div>
With mask you can do it
.button-file {
position: relative;
overflow:hidden;
color: #fff;
z-index: 0;
padding: 1rem 2rem;
}
.button-file i {
content: '';
position: absolute;
z-index: -1;
inset: 0;
border-radius: 30px;
padding: 5px; /* the thickness of the border */
/* the below will do the magic */
-webkit-mask:
linear-gradient(#fff 0 0) content-box, /* this will cover only the content area (no padding) */
linear-gradient(#fff 0 0); /* this will cover all the area */
-webkit-mask-composite: xor; /* needed for old browsers until the below is more supported */
mask-composite: exclude; /* this will exclude the first layer from the second so only the padding area will be kept visible */
}
.button-file i::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 400px;
height: 400px;
background: linear-gradient(#44a0b0 50%, #eeb450 0);
transform: translate(-50%, -50%) rotate(45deg);
transition: transform .7s linear;
}
.button-file:hover i::before {
transform: translate(-50%, -50%) rotate(315deg);
}
body {
height: 100vh;
margin:0;
display: flex;
align-items: center;
justify-content: center;
background-image: linear-gradient(to right, blue, red);
}
<a class="button-file">
<i></i> <!-- an extra element here -->
En savoir +
</a>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With