Добрый день.
Нужна кнопка с градиентом у 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%);
}
Простой
