如何使用线性渐变颜色创建按钮边框和文本?
我有一个半圆形的按钮。但我不知道如何将它弯曲以便在边框处使用我的半圆形按钮。如何使用线性渐变颜色创建按钮边框和文本?
.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为堆栈溢出社区提供了卓越的服务。
可能有更好的方法来做到这一点,但没有进一步的思考我想尝试这样的:
<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和梯度其他任何。 – 2015-10-28 23:35:22
这是你的半圆形按钮。可能会对你有帮助。
.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>
这里是溶液。它在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;
}}
这是用于引导3 –
伙计们,这是自举3 –