如何创建具有线性渐变颜色的按钮边框和文本？答案

【问题标题】：How can I create a button border and text with a linear gradient color?如何创建具有线性渐变颜色的按钮边框和文本？
【发布时间】：2015-10-27 00:54:52
【问题描述】：

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

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

请原谅我因为缺乏声誉而无法嵌入图像。感谢堆栈溢出社区的出色服务。

【问题讨论】：

伙计们，这是为引导程序 3 准备的。

标签： css button linear-gradients

【解决方案1】：

这是解决方案。它在 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

【讨论】：

这是用于引导程序 3
希望看到类似的内容只是一个标签

【解决方案2】：

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

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

【讨论】：

这是用于引导程序 3
标题和标签都没有表示除 CSS 和渐变之外的任何内容。

【解决方案3】：

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

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

【讨论】：