Задать вопрос
@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%);
}
  • Вопрос задан
  • 285 просмотров
Подписаться 1 Простой 4 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы