Bonjour,

J'ai essayé d'appliquer un box-sizing à un bouton bleu qui s'anime . Le box-sizing ne fonction pas le bouton ne prends pas la forme de la div ou il se situe. Étant difficile à comprendre je vous joint l'adresse de la page.https://anthonydos.github.io/projet3...mer/menu1.html
Passer la souris sur un des menus vous verrez apparaitre un bouton bleu et celui ci ne prendre pas la forme du rectangle ou il se situe.
J'ai essayé de déplacer le bouton dans différents endroits du block btn , rien n'a fonctionner avec box-sizing.
Je vous remercie par avance pour votre aide.
voici mon code:
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
<div class="btn">
            <div class="groupe">
              <p class="menu__ensemble__menu menu__ensemble__menu--nom">Salade Niçoise</p>
              <div class="menu__ensemble__menu menu__ensemble__textprix">
                <p class="text">zestes de citron </p> 
                <p class="prix">16€</p>               
              </div>
            </div> 
            <div class="btn__btn2">
              <div class="btn__btn2--check"><i class="fas fa-check-circle "></i></div>
            </div>
          </div>

Code CSS : 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
27
28
29
30
31
32
33
34
.btn {
  display: flex;
  justify-content: space-between;
  border-radius: 15px;
  margin: 3%;
  text-align: start;
  background-color: white;
  border: white;
  height: 60px;
  cursor: pointer;
  animation-duration: 3s;
  animation-name: slide; }
 
.btn .btn__btn2 {
  display: flex;
  align-items: center;
  cursor: pointer;
  background-color: aqua;
  width: 0;
  border-radius: 0 12px 12px 0;
  transition: width 5s; }
 
.btn__btn2--check {
  transform: translate(0) rotate(360deg);
  overflow: hidden;
  font-size: 24px;
  color: white;
  margin: auto; }
 
.btn:hover .btn__btn2 {
  width: 70px; }
  .btn:hover .btn__btn2 .btn__btn2--check {
    transform: rotate(360deg);
    animation: fa-spin 3s linear; }