Значок не отображается при наведении с помощью sass
Я использую scss и пытаюсь скрыть значок, и когда я навожу кнопку, я хочу, чтобы значок отображался. Я также хочу анимировать его, поэтому я не могу использовать display:none, поскольку я считаю, что вы не можете анимировать это. Поэтому я попытался использовать непрозрачность и видимость.
У меня 2 проблемы. Во-первых, текст в кнопке не центрирован, потому что значок находится в невидимом состоянии, но когда вы переходите к инструментам разработчика, вы все равно можете его там увидеть. Во-вторых, иконка не появляется при наведении.
.btn {
text-transform: uppercase;
text-decoration: none;
padding: 1.5rem 4rem;
display: inline-block;
font-size: 1.6rem;
box-shadow: 0 1rem 2rem rgba($color-black, .2);
&--primary {
background-color: $color-primary;
color: $color-white;
transition: all .2s;
&__icon {
visibility: hidden;
opacity: 0;
}
&:hover {
transform: translateY(-2px);
&__icon {
visibility: visible;
opacity: 1;
}
}
}
}<a href = "#" class = "btn btn--primary">Discover More <i class = "btn--primary__icon icon-basic-clockwise"></i></a>
Ответы 1
Я думаю, проблема в том, что ваш значок отображается в строке с нулевым содержанием. Я думаю, вам может понадобиться изменить значок на display: inline-block; и придать ему некоторые размеры. Вы захотите установить размеры на 0px, когда значок не должен быть виден.
Я преобразовал ваш код из SCSS в CSS и заменил переменные $ фактическими цветами CSS, чтобы сделать рабочий фрагмент...
.btn {
text-transform: uppercase;
text-decoration: none;
padding: 1.5rem 4rem;
display: inline-block;
font-size: 1.6rem;
box-shadow: 0 1rem 2rem rgba(0,0,0, .2);
width: 240px;
}
.btn--primary {
background-color: red;
color: white;
transition: all .2s;
}
.btn--primary__icon {
display: inline-block;
width: 0px;
height: 0px;
visibility: hidden;
opacity: 0;
}
.btn--primary:hover {
transform: translateY(-2px);
}
.btn--primary:hover .btn--primary__icon {
width: 20px;
height: 20px;
background-color: blue;
visibility: visible;
opacity: 1;
}<a href = "#" class = "btn btn--primary">
Discover More
<i class = "btn--primary__icon icon-basic-clockwise"></i>
</a>Спасибо, а есть ли способ добавить значок без увеличения кнопки? Он тянется вправо
Возможно фиксированная ширина?
можешь сделать скрипку на jsfiddle.net