Linear Gradient On a rounded button

Question

What would be the best approach to get a button with a border radius to be given a gradient?

This should be the end result:

This is the linear gradient I want to use:

linear-gradient(#FF6064, #FF9867)

Any pointers on what the best way to approach this would be much appricated. I am thinking I might need to mask something below the button in some way?

score 1 · Accepted Answer · answered Oct 05 '17 at 22:39

The gradient border is easy - just make a link with for example 2px padding and linear background and span inside with white background. To fill text with linear gradient you can use something what I am not sure if will work on all browsers. Code:

a {
  display: inline-block;
  padding: 2px;
  background: linear-gradient(#FF6064, #FF9867);
  border-radius: 20px;
}
a > span {
  display: inline-block;
  padding: 0 15px;
  height: 40px;
  line-height: 40px;
  background: #fff;
  border-radius: 18px;
}
a > span > span {
  font-weight: bold;
  background: linear-gradient(#FF6064, #FF9867);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<a href="#"><span><span>SOME TEXT</span></span></a>

`background: #fff;` ruins the fun out of it – Roko C. Buljan Oct 05 '17 at 22:46 — Roko C. Buljan, Oct 05 '17 at 22:46

G-Cyrillus · Answer 2 · 2017-10-05T23:03:21.383

You can give a try to background-clip and 3 gradients:

a {
  line-height: 2em;
  padding: 1em 2em;
  margin: 1em;
  display: inline-block;
  border-radius: 4em;
  border: solid transparent;
  background: linear-gradient(#fff, #fff), linear-gradient(#ff6064, #ff9867), linear-gradient(#ff6064, #ff9867);
  color: #ff6064;
  background-clip: padding-box, border-box, text;
}

<a href="#">button link </a>

chrome & IE would like this one better :

a {
  font-size:2rem;
  padding: 1em 2em;
  margin: 1em;
  display: inline-block;
  border-radius: 4em;
  border:  solid transparent;
  background: linear-gradient(0deg,#ff6064, #ff9867), linear-gradient(0deg,#ff6064, #ff9867);
  color: #ff6064;
  background-clip:  border-box, text;
  background-position: center center;
  box-shadow:inset 0 0 0 100px white;
  background-size:  110% 110%;
}

<a href="#">Chrome</a> <a href="#"> IE 11</a> <a href="#"> Firefox</a> but background-clip: text dislike to be involved with multiple background :(

@RokoC.Buljan chrome would like better the second snippet, for IE , nop. mix-blend-mode won't even give a workaround at this time. but second snippet will do except for the text. background-clip:text; was not long ago only supported by Chrome .... i believe you already knew this. — G-Cyrillus, Oct 05 '17 at 22:58

Linear Gradient On a rounded button

2 Answers2