# Learn how to create this awesome border hover effect

## HTML Setup

```xml
<button class="btn">
    Hover me
</button>
```

## CSS Styles

```css
body {
  background: #111;
}

.btn {
  cursor: pointer;
  background: none;
  border: none;
  color: white;
  border-radius: 100vmax;
  padding: 1rem 2rem;
  position: relative;
}
```

## The Gradient Effect

```css
.btn::before {
  content: "";
  background-image: 
    conic-gradient(
      #fff 0deg, transparent 320deg
    );
  
  /* Should be bigger than button */
  height: 200px;
  width: 200px;

  
  /* Centering the gradient  */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: 
      translate(-50%,-50%) 
      rotate(0deg);
  
  border-radius: inherit;
  transition: 
        transform 1s 
        cubic-bezier(0.3, 1, 0.3, 1);
}
```

## Rotate Gradient on Hover

```css
.btn:hover::before {
  transform: 
        translate(-50%,-50%) 
        rotate(-360deg);
}
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1682241185663/3f1f91ac-65bf-4d96-bb1b-f20ab588add6.gif align="center")

## Set overflow hidden in the parent element

```css
.btn {
  overflow: hidden;
}
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1682241211508/76563211-e4eb-4452-8334-1565ef282f6a.gif align="center")

## Covering up the gradient

\- Here we added btn-content div to cover up the gradient by setting its background color same as the main body color of the page and setting the gradient z-index to -1

```xml
<button class="btn">
  <div class="btn-content">
       Hover me
  </div>
</button>
```

```css
.btn {
  /* Becomes Border Size */
  padding: 3px; 
}

.btn::before {
  /* Put gradient behind btn-content */
  z-index: -1; 
}

.btn-content {
  background: #111;
  padding: 1rem 2rem;
  border-radius: inherit;
}
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1682242074270/c19425ff-1a7e-45e7-85c2-4372d24d0726.gif align="center")

Here's the Codepen [Link](https://codepen.io/alicalimli_dev/full/yLRggxP)

That's it you just learned how to create this awesome hover effect, I hope you found this one helpful and If you have any questions or comments please feel free to leave them below.