Bonjour,

Est-ce normal que ce code ne marche pas ? https://codepen.io/MehdiX/pen/mdywMzY

Que ce soit en CSS pure ou en SCSS, walou.

Il devrait y avoir une transformation de scale lors de l'appui sur le bouton mais cela ne fonctionne pas.

Que ce soit sur éditeur en ligne ou sur mon local. Y'a-t-il une erreur dans le code qui m'aurais échappée ?

Voici en CSS :

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
.btn {
    width: 50%;
    margin:0 auto;
    background-color: rgba(1, 28, 55, 0);
    border: 4px solid rgb(1, 28, 55);
    border-radius: 10rem;
    cursor: pointer;
    font-size: 3rem;
    padding:40px;
}
.btn:active + .circle {
    transform: scale(0.1);
}
.circle {
  width:200px;
  height:200px;
  border-radius:100%;
  background-color:red;
  transition:transform 400ms;
}
Et en SCSS :

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
25
26
 
$cd-btn:rgb(1, 28, 55);
$cd-btn-start:rgba(1, 28, 55, 0);
$cd-btn-end:rgba(1, 28, 55, 1);
.btn {
    width: 50%;
    margin:0 auto;
    background-color: $cd-btn-start;
    border: 4px solid $cd-btn;
    border-radius: 10rem;
    cursor: pointer;
    font-size: 3rem;
    padding:40px;
    &:active + .circle {
        transform: scale(1.0);
    }
}
 
.circle {
  width:200px;
  height:200px;
  border-radius:100%;
  background-color:red;
  transform:scale(0.1);
  transition:transform 4000ms;
}