CODEWITHSUNDEEP
cssbuttonlinear-gradients
sasdasdas sdsadsaL1
sasdasdas sdsadsaL1

Reputation: 115

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

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

enter image description here

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

Upvotes: 1

Views: 5909

Answers (3)

Ilya B.
Ilya B.

Reputation: 950

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

Upvotes: 2

Sirat Binte Siddique
Sirat Binte Siddique

Reputation: 453

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>

Upvotes: 1

user1263254
user1263254

Reputation:

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>

Upvotes: 1

Related Questions