How to mark up such a button with a gradient?

Before me stood a task to finish here are the buttons: HMOZp-yutI0.jpg I can Not understand how to make a gradient background and border to border remained rounded. Background gradient I have achieved, but to make the border a gradient can't. (I need to border-radius is preserved) Prompt please as it to make?
June 3rd 19 at 19:32
8 answers
June 3rd 19 at 19:34
June 3rd 19 at 19:36
Maybe just the border-radius to do, he works and with zero border and with border: none;

Or round the parent block and sub-text and a gradient background?
Or do a gradient from rodite and padding 1px, and the inner block with blue text.
If you want something here helped you, then at least share what you have and what does not work...
And so it will run past such issue is very much there and hard to understand what the author wants.
I need more the second option is to do can you please just give me the code for the second button: More, with a gradient frame?? I beg you, and starting from there I will make all - vince commented on June 3rd 19 at 19:39
"to", "at least." - Penelope91 commented on June 3rd 19 at 19:42
June 3rd 19 at 19:38
I need more the second option is to do can you please just give me the code for the second button: read More?? I beg you, and starting from there I will make all - vince commented on June 3rd 19 at 19:41
June 3rd 19 at 19:40
.button{
 width: 200px;
 height: 50px;
 border: 0;
 border-radius: 20px;
 background-image: linear-gradient(to right, #000 0%, #fff 100%);
}

I don't understand what the problem is
I need more the second option is to do can you please just give me the code for the second button: read More?? I beg you, and starting from there I will make all - vince commented on June 3rd 19 at 19:43
June 3rd 19 at 19:42
The problem is the gradient border, right?

You can try to move some border-image.

If the button lies on solid background - you can add item after or before the desired color, blue in your case, and to position as it should, leaving the stuck piece of the gradient thickness of the right border.

You can use svg
June 3rd 19 at 19:44
There are several solutions.
Here is the link https://www.hongkiat.com/blog/css-gradient-border/
1) using border-image to play
2) through the elements after/before
June 3rd 19 at 19:46
Using pseudo-elements: https://jsfiddle.net/q8pnt7bg/
border-image with rounded corners will not work.

Alternative to svg
Are you sure the second button with a gradient? I don't, but the solution above :) - vince commented on June 3rd 19 at 19:49
June 3rd 19 at 19:48
And now, let's practice together? (look and learn)))
An example of how to work with border-image:
- Well, the style for the button <div class="boxic"><b>- Pow -</b></div> almost ready.
Button has styles .boxic:hover{}, .boxic:active{} and cursor: pointer;

Find more questions by tags JavaScriptCSSHTML