Creating a gradient border for non-div element - html

Question

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 1

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>