Button without background with rotating border

Xanthous Published at Dev

Xanthous

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

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>

Temani Afif

With mask you can do it

.button-file {
  position: relative;
  overflow:hidden;
  color: #fff;
  z-index: 0;
  padding: 1rem 2rem;
}

.button-file span {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  right: 0;
  bottom: 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 (no padding) */ 
     linear-gradient(#fff 0 0) padding-box; /* this will cover the content and the padding */
  -webkit-mask-composite: destination-out; /* 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 span::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 span::before {
  transform: translate(-50%, -50%) rotate(315deg);
}

body {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(to right, blue, red);
}

<a class="button-file">
  <span></span> <!-- an extra element here  -->
  En savoir +
</a>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-01-29

Comments

0 comments

JFrame without frame border, maximum button, minimum button and frame icon

iText 7 : image field (button) without border nor background (transparent)

(JavaFX 8) css button border and background color issue

Button without background with rotating border

Button without background with rotating border

Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

pump.io port in URL

Failed to listen on localhost:8000 (reason: Cannot assign requested address)

Unable to use switch toggle for dark mode in material-ui

grouping by column variables and appending a new variable based on condition

BigQuery - concatenate ignoring NULL

Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

Python Read Directory And Output to CSV

Remove adjacent duplicates in linked list in C

Angular 8. Unknown amount of http.get requests in array to call, must be sequential, what to use

How to keep curl session alive between two php processes?

Limit number of characters in uitextview

JMeter: Why get error when try to save test plan

Always setting the text cursor on Textbox

MTKView Displaying Wide Gamut P3 Colorspace

Vector input in shiny R and then use it

How to implement an authentication method using Spring Boot and JPA?

Laravel getting value from another table using eloquent

org.springframework.web.client.HttpClientErrorException: 401 null

When I click any button in my view page the form is submitted