How to create a button with a gradient on the frame and hovering in the background?

Good afternoon.

Need a button with a gradient at the border and the text inside it. Hover color of the button becomes the gradient, Tex white.

The background of a button without the guidance should be transparent.

Tried to implement, when you hover over button there is some stripes, I can not understand(

https://codepen.io/suildus/pen/rNaPwez

<a href="index.html#" class="btn"><span>Button </span></a>


a {
 color: inherit;
 text-decoration: none;
}
.btn {
 padding: 35px 45px;
 background: transparent;
 border: 2px solid transparent;
 border-image: linear-gradient(90deg, #002e48, #e72240);
 -moz-border-image: -moz-linear-gradient(left, #002e48, #e72240);
 -webkit-border-image: -webkit-linear-gradient(left, #002e48, #e72240);
 border-image-slice: 1;
 position: relative;
 z-index: 3;
 -webkit-transition: all .4s;
 transition: all .4s;
 cursor: pointer;
 outline: none !important;
 overflow: hidden;
 font-family: 'Raleway', sans-serif;
 font-size: 28px;
 font-weight: 700;
 border-radius: 0px;
 display: inline-block;
 text-align: center;
 white-space: nowrap;
 vertical-align: middle;
}
.btn span {
 position: relative;
 z-index: 2;
 -webkit-transition-delay: 0s;
 transition-delay: 0s;
 background: linear-gradient(90deg, #002e48, #e72240);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 color: #002e48;
}
.btn:hover span {
 color: #fff;
 -webkit-text-fill-color: currentColor;
 background: none;
}
.btn:hover {
 box-shadow: 0 5px 20px rgba(0, 0, 0, .2);
 background-image: linear-gradient(126deg, rgba(0,46,72,1) 0%, rgba(231,34,64,1) 100%);
}
April 4th 20 at 13:26
0 answer

Find more questions by tags CSSHTML