Цвет фона заливки снизу вверх: небольшая ошибка - PullRequest
Новая
       46

Цвет фона заливки снизу вверх: небольшая ошибка

1 голос
/ 26 мая 2020

Я использовал переход для заливки цвета фона снизу вверх. Анимация отлично работает с фрагментами здесь, а также с codepen.io (https://codepen.io/mohits0631/pen/pojBmOa), но на моем веб-сайте под текстом есть цветная линия. Кто-нибудь может сказать мне, почему это происходит? Я добавляю здесь снимок экрана

enter image description here

вот мой код: 

.btn-text:link,
.btn-text:visited{
    color: green;
    display: inline-block;
    padding: .3rem;
    text-decoration: none;
    font-weight: 400;
    background-image: linear-gradient(to top, green 50%, transparent 50%);
    background-size: 100% 200%;
    background-position: top;
    transition: background-position 0.9s ease-out;
}
.btn-text:hover {
    background-position: bottom;
    color: white;
}
<a href="#" class="btn-text">Learn More &rarr;</a>

Ответы [ 2 ]

0 голосов
/ 26 мая 2020

Это один из способов сделать это, но вы также можете относительно позиционировать ссылку и применить псевдоселектор :after к этой ссылке, чтобы затем полностью позиционировать ее внизу, с изначально установленной высотой 0, чтобы затем заполните его при наведении. Подумайте о чем-то вроде этого: 

.link { 
  position: relative; 
}
.link:after { 
  content: '';
  position: absolute; 
  bottom:0; 
  left:0; 
  background-color: green;
  width: 100%;
  height: 0;
  z-index: -1;
  transition: height 0.3s linear;
}
.link:hover:after {
  height: 100%;
}

Совет: на самом деле плохая практика - переносить что-либо, кроме opacity или transform, но есть способы сделать это и этим, например, с scaleY в сочетании с transform-origin, установленным на нижнюю часть и начальной высотой 100%, но первый вариант должен быть вполне подходящим.

0 голосов
/ 26 мая 2020

В шаблоне вашего сайта, вероятно, есть какое-то текстовое оформление, которое вам нужно изменить.

В вашем CSS вы применяете только text-decoration: none к классу, когда применяется псевдоэлемент. Но вы хотите применить text-decoration: none ко всем состояниям этого класса. Попробуйте следующее: 

.btn-text{
  text-decoration:none;
}

В зависимости от шаблона вам также может потребоваться добавить! Important.

...