Button with transparent background and rotating gradient border

Question

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>

Answer 1

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>