Bonjour, je découvre actuellement le CSS donc désolé si je dis une bêtise.

Le but du code suivant est de faire changer la couleur d'un bouton quand on le survole :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
<button class="btn">
    Survole moi!
    <div class="btn__bg"></div>
</button>

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$border-rad: 2rem;
$clr-btn: #15DEA5;
.btn {
    border-radius: $border-rad;
    background-color: $clr-btn;
    position: relative;
    z-index: 1;
    &:hover {
        & .btn__bg {
            opacity: 1;
        }
    }
    &__bg {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: darken($clr-btn, 5);
        opacity: 0;
        z-index: -1;
        transition: opacity 250ms;
    }
}
Je sais que l'élément ayant la valeur de z-index la plus élevée sera placé par dessus les autres.

Donc .btn est placé au dessus de .btn__bg (ce dernier est donc caché par .btn).

Quand je vais survoler .btn, .btn__bg va passer de transparent à opaque avec une transition de 250ms.

Mais comme .btn__bg est caché en dessous de .btn, je ne devrais rien voir et pourtant si...tout marche comme prévu. Il y a un truc que j'ai mal compris.

Pouvez-vous m'aider svp ?