Animation et box-sizing

**tony060** · 29/09/2020, 23h37

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

**NoSmoking** · 30/09/2020, 09h22

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

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

**tony060** · 30/09/2020, 13h48

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 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">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 :

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

**NoSmoking** · 30/09/2020, 16h40

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.

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.