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

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

请原谅，我不能够嵌入由于缺乏信誉的形象。 Thx为堆栈溢出社区提供了卓越的服务。

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