如何使用线性渐变颜色创建按钮边框和文本？

Question

我有一个半圆形的按钮。但我不知道如何弯曲它的边缘的半圆形按钮。

.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%);*/
*/
}

原谅我因为缺乏声誉而无法嵌入图片。对于堆栈溢出社区来说，这是一项很棒的服务。

Answer 1

可能有更好的方法可以做到这一点，但如果没有进一步的思考，我会尝试这样的事情：

<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 2

这是你的半圆形按钮。可能对你有所帮助。

.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>

Answer 3

这是解决方案。它在webkit中运行良好。在其他浏览器中，文字颜色是可靠的。

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