Animation et box-sizing

Version imprimable

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:

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:

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

30/09/2020, 09h22
NoSmoking

Bonjour,
décidément les discussions se suivent et se ressemblent :mrgreen:

Voir la proposition faite dans cette discussion : Animation div avec texte qui se tronque.

Bonjour,

Merci beaucoup :) pour le lien j'ai testé le code et c'est cela dont j'ai besoin , mais il est impossible de changer la couleur de fond qui encadre le cercle ? je ne parle pas du background-color du svg mais de son bloc ou il est contenu. Je ne sais si tu vois ce que je veux dire. J 'ai fait ceci mais impossible a rogner le texte et a avoir les même bord que le bloc. Je te remercie par avance.

Code:

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">Foie gras de canard mi-cuit</p>
              <div class="menu__ensemble__menu menu__ensemble__textprix">
                <p class="text">Et ses copeaux <span class="overflow">de truffe noire</span></p> 
                <p class="prix">35€</p>
              </div>              
            </div>
            <div class="btn__btn2">
              <div class="btn__btn2--check"><i class="fas fa-check-circle "></i></div>
            </div>
          </div>

Code:

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

30/09/2020, 16h40
NoSmoking

Citation:

pour le lien j'ai testé le code et c'est cela dont j'ai besoin

Dans ce cas il te faut reprendre la structure pour que cela fonctionne avec le même CSS.

Citation:

mais il est impossible de changer la couleur de fond qui encadre le cercle ? je ne parle pas du background-color du svg mais de son bloc ou il est contenu.

si, c'est la propriété background-color qu'il faut modifier.

Remarque : évite de mettre des animations trop longue cela rend l'effet désagréable.
30/09/2020, 16h53
tony060

Merci beaucoup pour cette aide :) je vais envoi pouvoir envoyer mon devoir . :D
30/09/2020, 18h22
NoSmoking

Citation:

je vais ~~envoi~~ pouvoir envoyer mon devoir .

c'est bien mais l'important reste que tu ais bien compris ce que tu as fait ;)