button with gradient background and rounded outline - css

Question

Currently I am using image of the whitish border and inside that I am using the button. But it has responsive issues. Can we create the whole thing with css or eliminate the responsive issue if it cant be done with css.
.header-btn-section img{
display: block;
margin: 0 auto;
margin-top: -23px;
width: 370px;
height: 80px;
}
.header-btn {
padding: 15px 40px 15px 40px;
background: #5760f4;
background-image: -webkit-linear-gradient(left, #5760f4 , #f3135d);
background-image: linear-gradient(to right, #5760f4 , #f3135d);
border-radius: 40px;
border: none;
text-transform: uppercase;
color: #fff;
font-size: 25px;
font-weight: bold;
}
.header-btn:hover {
background: #6e73df;
background-image: -webkit-linear-gradient(left, #f3135d, #5760f4);
background-image: linear-gradient(to right,#f3135d,#5760f4);
}
.btn-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="header-btn-section" style="position: relative">
<img class="btn-background" src="https://i.imgur.com/StNBlDd.png">
<div class="btn-container">
<button class="header-btn">Try DddxdVdDk Free !</button>
</div>
</div>

Answer 1

You can do this with one element considering background, border and background-clip:
.box {
width:200px;
height:70px;
border-radius:70px;
padding:5px; /* Control the space between border and background*/
background-image:linear-gradient(to right,red, blue);
background-clip:content-box; /* Don't color the padding */
border:3px solid #fff;
color:#fff;
font-size:20px;
}
.box:hover {
background-image:linear-gradient(to left,red, blue);
}
body {
background:pink;
}
<button class="box">Some text here</button>
If you want to use the padding to control the spacing, use pseudo element:
.box {
padding:20px 40px;
max-width:220px;
border-radius:70px;
position:relative;
z-index:0;
border:none;
background:none;
color:#fff;
font-size:20px;
}
.box:before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
border-radius:inherit;
padding:5px; /* Control the space between border and background*/
background-image:linear-gradient(to right,red, blue);
background-clip:content-box; /* Don't color the padding */
border:3px solid #fff;
}
.box:hover::before {
background-image:linear-gradient(to left,red, blue);
}
body {
background:pink;
}
<button class="box">Some text here</button>
<button class="box">Some long text here</button>