Transition

0 
.button-transparent {
  font-size: 14px;
  text-transform: uppercase;
  border: 1px solid #0a0a0a;
  transition: background-color .4s ease, color .4s ease;
}

.button-transparent__icon {
  width: 1.8em;
  height: 1.8em;
  fill: #0a0a0a;
  transition: fill .4s ease;
}

.button-transparent:hover {
  background-color: #0a0a0a;
  color: #ffffff;
}

.button-transparent:hover .button-transparent__icon {
  fill: #ffffff;
}

Chciałbym, żeby powyższy kod animował się TYLKO za pomocą opacity (zarówno button i ikona).
Próbowałem to robić przy pomocy ::before ale nie wychodziło mi... nie mówiąc już o sporej ilości kodu.
Wiem, że na pewno można to napisać prościej. Z góry dziękuje za pomoc.

0

Co rozumiesz przez: Chciałbym, żeby powyższy kod animował się TYLKO za pomocą opacity?
Poza tym rozumiem, że to CSS opisujące jakieś SVG?

0

Animowanie tego za pomocą opacity byłyby bardziej wydajne.
Button składa się z tekstu i svg.
.button-transparent__icon to svg.

1

No to użyj opacity. W czym problem?

0

Nie da się tego po prostu podmienić - nie działa w ten sposób.

0

Nie wiem, co właściwie chcesz osiągnąć i nie wiem co ci nie działa w jaki sposób, więc ci nie pomogę.

0 
::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        background-color: #0a0a0a;
        color: #ffffff;
        opacity: 0;
        transition: opacity .4s ease;
    }

    :hover::after {
        opacity: 1;
    }

^ O coś takiego mi chodzi. Ale to nie działa.
Na ::after ustawiamy właściwości background-color i color (bo te chcemy zmienić) oraz opacity na 0. Dzięki temu możemy animowac to opacity a nie po background i color.

1

U mnie działa:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<style>
DIV::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        background-color: #0a0a0a;
        color: #ffffff;
        opacity: 0;
        transition: opacity .4s ease;
    }

DIV:hover::after {
        opacity: 1;
    }
</style>
</head>
<body>

<div>DIV</div>

</body>
</html>

1 użytkowników online, w tym zalogowanych: 0, gości: 1