Discussion :

[nadfri2019]

Bonjour à tous,

Je n'arrive pas a trouver la reponse à mon probleme.

Je voudrais faire un bouton personnalisé avec une image, et au click, afin de faire une difference, une autre image s'affiche.
La pseudo classe active ne semble pas fonctionner du tout. Avez vous une idée?

Code HTML :

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

1
2
3
            <div id="home">
                <button onclick="window.location='index.html'"></button>
            </div>

Code :

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

1
2
3
4
5
6
7
8
9
#home button
{
	width: 100%;
	height:100%;
	background: url("img/menu.png") no-repeat center; //image à modifier au click par img/menu2.png
  	background-size: contain;
  	cursor:pointer;
  	border-radius: 10px;
}

[Invité]

Bonjour,

1- Pas besoin de JavaScript (pour la redirection) :

Code html :

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

1
2
3
4
5
<div id="home">
  <form action="index.html">
    <button></button>
  </form>
</div>

2-

• :focus

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
#home form, #home form button
{
	width: 100%;
	height:100%;
	background: url("img/menu.png") no-repeat center;
  	background-size: cover;
  	cursor:pointer;
  	border-radius: 10px;
}
#home form button:focus
{
	background-image: url("img/menu2.png");
}

[nadfri2019]

Merci Jreaux62,

L'astuce pour le lien avec le form marche nickel, ca m'evite à gérer cela avec JS.

Pour mon bouton, avec le focus ça ne faisait pas exactement ce que je voulais, j'ai donc remplacé par active:, et ça marche à la perfection!

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
 
#home form, #home form button
{
	width: 100%;
	height:100%;
	background: url("img/menu.png") no-repeat center;
  	background-size: cover;
  	cursor:pointer;
  	border-radius: 10px;
}
 
#home form button:active
{
	background-image: url("img/menu2.png");
}

[nadfri2019]

Autre petit probleme,

J'ai remarqué que les animations boutons ne marche plus en responsive, est-ce normal?

Cdt.