J'aimerais savoir, comment puis-je faire cet effet comme sur YouTube. Je veux dire, quand je verse sur le bouton, il devient plus sombre et quand je clique, il change de couleur en bleu. Est-ce une pure CSS ou il y a aussi un javascript aussi? (Seulement frontal bien sûr). P>
Et quel type d'icônes dois-je utiliser? P>
3 Réponses :
Peut être à la fois, mais bien sûr, vous pouvez faire dans pure CSS
c'est une modification sur le ventre, mais je vous ai fabriquée à vous voir p>
p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hover css</title>
</head>
<body>
<button type="submit" id="button">Press here!</button>
</body>
</html>Cet effet peut être facilement effectué avec des pseudoclasses CSS
avec ceux-ci, vous pouvez contrôler le style d'un élément lorsque le pointeur est sur celui-ci, cliquez dessus, etc. P>
Exemple dans .CSS fort> Fichier: P> / * unvisited link * /
a: link {
color: # FF0000;
}
/ * visited link * /
a: visited {
color: # 00FF00;
}
/ * mouse over link * /
a: hover {
color: # FF00FF;
}
/ * selected link * /
a: active {
color: # 0000FF;
}
Et ce bouton "J'aime" doit être un .svg, .png ou un peu unicode?
Pour les icônes, la meilleure option serait de travailler avec .svg, ils sont réactifs et légers. Pour le rendre plus dinamique, par exemple, vous pouvez mettre cela .svg dans un élément
L'effet sombre sur le vol stationnaire peut être fait avec un pseudo-sélecteur CSS 1: avec : survol code>. Le changement de couleur au Blue On click dépend de votre besoin. Si vous souhaitez que la couleur change de couleur bleue, tournez à nouveau rouge lorsque la souris est relâchée, le pseudo-sélecteur CSS : actif code> peut être utilisé. Mais si vous voulez que la couleur change de façon permanente en bleu et que vous ne tournez pas rouge après la sortie de la souris, JavaScript peut être utilisé. : actif p> P> P> <button class="myButton">Click me</button>
Cliquez avec le bouton droit sur le bouton et inspecter dans les outils DEV. Première chose que vous devez apprendre comme un device Web.
@Adrianbrand en fait, je ne demanderais pas si je savais cela d'inspecter.