How can I create a button border and text with a linear gradient color?

Question

I have a semi-round button. But I don't know how to bend it for my semi-round button in it's border.

.semi-circle {
    display:       inline-block;
    padding:       9px 16px;
    border-radius: 999px !important; 
    text-align:    center;

    /*border: 10px solid transparent;*/
  /*  -moz-border-image: -moz-linear-gradient(right, #FC913A 0%, #FF4E50 100%);
    -webkit-border-image: -webkit-linear-gradient(right, #FC913A 0%, #FF4E50 100%);
    border-image: linear-gradient(to left, #FC913A 0%, #FF4E50 100%);*/
    /*border-image-slice: 1;*/
border: linear-gradient(to right, green 0%, blue 100%);

/*background-image: linear-gradient(to left, #FC913A 0%, #FF4E50 100%);*/
background-image: -o-linear-gradient(to left, #FC913A 0%, #FF4E50 100%);*/
background-image: -moz-linear-gradient(to left, #FC913A 0%, #FF4E50 100%);*/
background-image: -webkit-linear-gradient(to left, #FC913A 0%, #FF4E50 100%);*/
background-image: -ms-linear-gradient(to left, #FC913A 0%, #FF4E50 100%);*/
*/
}

Forgive me for not being able to embed the image because of lack of reputation. Thx for the stack overflow community for its great service.

Answer 1

Here is solution. It works fine in webkit. In other browsers text color is solid.

HTML

<button data-text="Round button"></button>
<button class="active" data-text="Active round button"></button>

CSS

body {
  background: #384041;
}
*,
*:before,
*:after {
  box-sizing: border-box;
}
button {
  display: inline-block;
  border: none;
  outline: none;
  appearance: none;
  background: red;
  position: relative;
  z-index: 3;
  height: 60px;
  border-radius: 30px;
  padding: 0 21px;
  font-size: 21px;
  box-shadow: -1px -1px 1px 0 black;
  background: #4f4f4f;
}
button:before {
  content: attr(data-text);
  min-width: 144px;
  z-index: -1;
  border-radius: 27px;
  color: #4f4f4f;
}
@media screen and (-webkit-min-device-pixel-ratio:0) { button:before {
  background: #4f4f4f;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}}
button:after {
  content: '';
  position: absolute;
  left: 3px;
  right: 3px;
  top: 3px;
  bottom: 3px;
  z-index: -2;
  border-radius: 30px;
  background: #151515;
}
button:hover {
  cursor: pointer;
  background: linear-gradient(to right, #2084c3 0%, #00caa0 100%);
}
.active {
  background: linear-gradient(to right, #2084c3 0%, #00caa0 100%);
}
.active:before{
  color: #2084c3;
}

@media screen and (-webkit-min-device-pixel-ratio:0) { .active:before {
  background: linear-gradient(to right, #2084c3 0%, #00caa0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}}

Demo

Answer 2

There are probably better ways to do this, but without further thinking I'd try something like this:

<style type="text/css">
.semi_outer {
    padding: 2px;
    text-align: center;
    border-radius: 11px;
    background: linear-gradient(to right, #0f0, #00f);
}

.semi_inner {
    margin: 2px;
    border-radius: 7px;
    background-color: #000;
    color: #0f0;
}

.semi_outer:hover {
    background: linear-gradient(to right, #c00, #0c0);
}

.semi_outer:active {
    background: linear-gradient(to right, #f00, #0f0);
}
</style>

<div class="semi_outer">
    <div class="semi_inner">
    semi_inner
    </div>
</div>

Answer 3

This is your semi-round button . may be it will be helpfull for you.

 .outer { padding: 2px; text-align: center; border-radius: 11px; background: linear-gradient(to right, #0f0, #00f); width: 200px; height:30px; } .inner { margin: 3px; border-radius: 7px; background-color: #000; color: #0f0; height:25px; } .outer:hover { background: linear-gradient(to right, #c00, #0c0); } .outer:active { background: linear-gradient(to right, #f00, #0f0); } 

 <div class="outer"> <div class="inner"> BUTTON </div> </div>