Animation bouton en Css

**tony060** · 18/09/2020, 19h43

Bonjour,

Je suis bloqué depuis une semaine avec un bouton que je dois placer. J'ai créé mon bouton, mais lorsque la personne souhaite ajouter "donc clique sur le bouton" une animation dois venir de la droite avec un "petit valider " qui tourne sur lui même. Après plusieurs tentative je n'arrive pas à faire venir l'animation de la droite. Je vous joint la photo de la réplique que je dois faire. Je dois créé l'animation qu'avec du css.

Voici le lien de mes boutons pour mon projet https://anthonydos.github.io/projet3...mer/menu1.html

et en dessous c'est le code que j'ai écris pour faire mes tests.

Nom : IMG_0971.jpg
Affichages : 285
Taille : 66,5 Ko

Nom : IMG_0971.jpg
Affichages : 285
Taille : 66,5 Ko

Je vous remercie par avance pour votre aide

.

Le code que j'ai créé pour le bouton et l'animation: ( c'est juste un bouton pour mes tests)

Code HTML :

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

1
2
3
4
5
6
<div class="btn">
                <div class="btn__text">menu numéro 3</div>
                <div class="btn__fa">
                    <div class="btn__fa__badge"><i class="far 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
35
36
.btn {
 
	display: flex;
	width:auto;
	border-radius: 15px;
	height: 90px;
	width: 230px;
	border: 3px solid black; 
	&:hover .btn__fa{
	        cursor: pointer;
		animation-name: btn__fa;
		animation-duration: 1000ms;}
		@keyframes btn__fa {
			0% {
			  transform:scaleX(0);
 
			}
			100%{
				transform: scaleX(1);
 
 
			} 
		}	
}	
.btn__text {
	display: flex;
}
.btn__fa {
	display: flex;
	margin-left: 52%;
	background-color: red;
	width:50%;
	border-radius:0 12px 12px 0;
 
 
}

**NoSmoking** · 21/09/2020, 09h57

Bonjour,
tout d'abord ton code SCSS ne nous aide pas à voir rapidement si il y a une erreur, il est préférable de poster directement le code CSS.

Pourquoi passer par une animation là où une transformation semble suffisante ?
translate et rotate devrait faire l'affaire.

Voici un exemple simple que je te laisse découvrir :

Code html :

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation simple</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d2091325">
<meta name="description" content="">
<style>
.btn {
  display: flex;
  position: relative;
  align-items: center;
  width: 15em;
  height: 5em;
  border: 1px solid #069;
  overflow: hidden;
  cursor: pointer;
}
.btn .btn-icone {
  position: absolute;
  top: 0;
  left: 100%;
  box-sizing: border-box;
  width: 5em;
  height: 100%;
  border: 4px solid currentColor;
  border-radius: 50%;
  color: #690;
  background-color: #EFD;
  transition: all .5s;
  transform: translate( 0) rotate(180deg);
}
.btn:hover .btn-icone {
  transform: translate( -100%) rotate(0deg);
}
</style>
</head>
<body>
<h1>Animation simple</h1>
<div class="btn">
  Texte du button
  <div class="btn-icone">
    <svg width="100%" viewBox="0 0 16 16" fill="currentColor">
      <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 011.071 1.05l-3.992 4.99a.75.75 0 01-1.08.02L4.324 8.384a.75.75 0 111.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 01.02-.022z"></path>
    </svg>
  </div>
</div>
</body>
</html>

il y a pas mal de cosmétique

**tony060** · 23/09/2020, 23h49

Nosmoking merci beaucoup pour ton aide

j'ai essayé tellement de chose que je me suis perdu et je me suis compliqué un peu trop la vie. Désoler de te répondre tardivement je n'avais pas vu ton message. Je vais appliquer ton code. Merci encore

.

Animation bouton en Css [CSS 3]

Animation en CSS

Discussions similaires

Partager

Partager