Discussion :

[Shayam Design]

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;
}

[NoSmoking]

Bonjour,
Le combinateur + cible un élément qui suivent immédiatement un élément donné, or dans ton code HTML l'élément class="circle" précède l'élément class="btn".

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div class="circle"></div>
<div class="btn">
  Clique moi !
</div>

il te faut inverser l'ordre

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div class="btn">
  Clique moi !
</div>
<div class="circle"></div>

[Shayam Design]

Ah mais oui en effet ! Je bloquais je comprenais pas ce qui se passait
Merci !!