Как создать кнопку с градиентом на рамке и при наведении на фоне?

Question

[Suil]

Добрый день.

Нужна кнопка с градиентом у border и текста внутри него. При наведении цвет кнопки становится градиентом, текс белым.

Фон кнопки без наведения должен быть прозрачным.

Попытался реализовать, при наведении на кнопку появляются какие то полоски, не могу разобраться(

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

<a href="index.html#" class="btn"><span>Кнопка </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%);
}

Comments

[Шохрух Шаймардонов]

Разве не так должно выглядеть?

Как отображается результат вашего кода

Обычное состояние

При наведении (:hover)

[Suil]

Шохрух Шаймардонов, да, так)
У меня наверное браузер так отображает)
Полоски по бокам

[Шохрух Шаймардонов]

Suil, возможно. Если это не chromium-based, то возможно какие-то свойства в сss могут криво работать

[Suil]

VicTHOR, пробую. Заметил ещё, что при зуммирование 125% и больше, полоски пропадают.