JakiHappyCity JakiHappyCity - 3 months ago 22
CSS Question

Creating a gradient border for non-div element

i have bordered button (Non-div element, ). I need to get gradient color on the borders of my button. Now my button looks like this (In generally this is it):



.uibutton, uibutton:focus {
width: 120px;
height: 27px;
color: #007AFF;
outline: none;
border-radius: 3px;
border-width: 1px;
border-style: solid;
border-color: #007AFF;
background-color: transparent;
}
.uibutton:active {
width: 120px;
height: 27px;
color: #007AFF;
outline: none;
border-radius: 3px;
border-width: 2px;
border-style: solid;
background-color: transparent;
}
.uibutton:disabled {
width: 120px;
height: 27px;
color: #C7C7CC;
outline: none;
border-radius: 3px;
border-width: 1px;
border-color: #C7C7CC;
border-style: solid;
background-color: transparent;
}

<button class="uibutton">Hello World</button>
<button class="uibutton" disabled>Hello World</button>





I need gradient only in borders of button.
I'm so sorry, i'm idiot, just i confused in my code and how to write it.
Thanks for patience.

Answer

To add gradient background to button use code above or try CSS Gradient Generator.

.button {
  width: 120px;
  height: 27px;
  outline: none;
  border-radius: 3px;
  box-sizing: border-box;
  cursor: pointer;
}

.solid {
  color: #fff;
  border: none;
  background: linear-gradient(150deg, #3acfd5 0%,#3a89d5 50%,#3a51d5 100%);
}

.thin {
  border-left: none;
  border-right: none;
  border-top: 1px solid #1AD6FD;
  border-bottom: 1px solid #1D62F0;
  
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 1px 100%;
  
  background-color: transparent; /* removes button background */
  background-image: 
    linear-gradient(to bottom, #1AD6FD 0%, #1D62F0 100%), 
    linear-gradient(to bottom, #1AD6FD 0%, #1D62F0 100%);
}
<button class="button solid">My button</button>
<button class="button thin">My button</button>