Gradient border with border radius and gradient text

Question

I am trying to achieve the below design! I have managed to achieve the border radius with gradient border but if i try to use -webkit-background-clip & -webkit-text-fill-color for gradient text then the border radius doesn't work and the whole button gets the gradient color. I am using this as reference for gradient text and attaching the code for gradient border

.btn {
  background-image: linear-gradient(to right, #006175 0%, #00a950 100%);
  border-radius: 40px;
  box-sizing: border-box;
  color: #00a84f;
  display: block;
  font: 1.125rem 'Oswald', Arial, sans-serif;
  /*18*/
  height: 80px;
  letter-spacing: 1px;
  margin: 0 auto;
  padding: 4px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  width: 264px;
  z-index: 2;
}

.btn:hover {
  color: #fff;
}

.btn span {
  align-items: center;
  background: #e7e8e9;
  border-radius: 40px;
  display: flex;
  justify-content: center;
  height: 100%;
  transition: background .5s ease;
  width: 100%;
}

.btn:hover span {
  background: transparent;
}

<a class="btn" href="#">
  <span>Click Here!</span>
</a>

Any kind of help would be greatly appreciated! Please feel free to give some suggestions. TIA

Temani Afif · Accepted Answer · 2022-07-19 10:34:55Z

9

I will consider this previous answer to build the rounded gradient using pseudo element so that you can use background-clip:text on the main element. I have used the mask version by you can also consider the SVG one:

.btn {
  --r:40px; /* radius */
  --b:5px; /* border width */
  
  background: linear-gradient(to right, #006175 0%, #00a950 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 1.5rem 'Oswald', Arial, sans-serif;
  height: 80px;
  margin: 0 auto;
  position: relative;
  z-index:0;
  text-decoration: none;
  width: 264px;
}
/* check lined question for the detail of the below code */
.btn::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset: 0;
  border: var(--b) solid transparent;
  border-radius: var(--r);
  background: inherit;
  background-origin: border-box;
  background-clip: border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  -webkit-mask-repeat: no-repeat;
}
/**/
.btn:hover {
  color: #fff;
  -webkit-text-fill-color: #fff;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}

.btn:hover::before {
  -webkit-mask:none;
}

body {
  background:pink;
}

<a class="btn" href="#">
  Click Here!
</a>

edited Jul 19, 2022 at 10:34

answered Oct 19, 2020 at 12:52

Temani Afif

280k30 gold badges378 silver badges502 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Harshini Over a year ago

does not work in safari though, is there anything specific to chrome here?

Temani Afif Over a year ago

@Harshini replace destination-out with xor

Harshini Over a year ago

nope still same.

mateusloubach · Accepted Answer · 2021-09-01 14:26:01Z

-1

I got this answer from another post and it worked out for me:

border-bottom: 6px solid transparent;
border-image: linear-gradient(to right, red , yellow);
border-image-slice: 1;

and from my experience, I would use &:after to insert &:hover options to the desired hover effects.

answered Sep 1, 2021 at 14:26

mateusloubach

191 silver badge4 bronze badges

2 Comments

Dzmitry Vasilevsky Over a year ago

It can't have rounded borders, that's why someone minused

Dzmitry Vasilevsky Over a year ago

It actually have it now: "I have managed to achieve the border radius with gradient border"

Collectives™ on Stack Overflow

Gradient border with border radius and gradient text

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related