CODEWITHSUNDEEP
csslinear-gradients
nazifa rashid
nazifa rashid

Reputation: 1519

Gradient border with border radius and gradient text

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

CSS gradient text with 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

Upvotes: 3

Views: 6992

Answers (2)

Temani Afif
Temani Afif

Reputation: 272608

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>

Upvotes: 9

mateus_cesar
mateus_cesar

Reputation: 19

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.

Upvotes: -1

Related Questions