Changer la couleur des boutons au survol de la souris

Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :


Sujets que vous pourriez aussi aimer :


Changer l'aspect des boutons au survol

Pour peaufiner une application, la rendre plus ergonomique et agréable, il est possible de réaliser très simplement des effets visuels dynamiques.



Dans l'exemple illustré par la capture, le formulaire est composé de deux boutons. Dès que la souris survole l'un d'entre eux, ce dernier change d'aspect. Puis, il reprend sa mise en forme initiale dès que la souris quitte la zone d'influence. Et nous allons le voir, cette petite friandise se réalise sans l'appui du code VBA ni même des macros.

Source et procédure
Pour la mise en place de cette nouvelle astuce, nous proposons de récupérer une petite base de données hébergeant ce formulaire.

• Télécharger le fichier survol-boutons.rar en cliquant sur ce lien,
• Le décompresser dans le dossier de votre choix,
• Double cliquer sur le fichier résultant pour l'ouvrir dans Access,
• Puis, cliquer sur le bouton Activer le contenu du bandeau de sécurité,
• Dans le volet de navigation, double cliquer sur le formulaire f_ajout pour l'exécuter,

La vocation de ce formulaire est de créer de nouveaux enregistrements dans la table t_sorties au clic sur le bouton Ajouter. Il n'est certes pas fonctionnel car non abouti puisque seule l'astuce permettant de créer ces effets visuels nous intéresse.

• Tout à fait à gauche du ruban Accueil, cliquer sur la flèche du bouton Affichage,
• Dans la liste des propositions, choisir le mode création,

Nous basculons ainsi dans la vue en conception du formulaire. Pour la suite des opérations la feuille de propriétés est indispensable. Elle est généralement placée sur la gauche de l'écran. Si elle n'est pas visible dans votre environnement, vous devez cliquer sur le bouton Feuille de propriétés dans le ruban contextuel Création.

• Sur le formulaire, cliquer sur le bouton Ajouter pour le sélectionner,
• Activer alors l'onglet Format de sa feuille de propriétés,
• Cliquer dans la zone de sa propriété Couleur sélectionnée par pointage,

En d'autres termes, il s'agit de la couleur à appliquer lorsque le curseur de la souris survole le bouton.

• Remplacer l'actuelle valeur par la suivante : #FECC03,

Il s'agit d'un code hexadécimal que vous pouvez reproduire facilement avec un logiciel comme Photoshop. Ce code correspond à un jaune vif. Avec la propriété du dessous, vous constatez qu'il est de même possible d'influer sur la couleur au clic sur le bouton. Mais nous en resterons là. Il est préférable d'adapter la couleur du texte pour que ce dernier ressorte de façon évidente sur une couleur sombre devenue claire.

• Cliquer dans la zone de sa propriété Couleur texte sélectionnée par pointage,
• Remplacer l'actuelle valeur par la suivante : #A13638,

Il s'agit d'un rouge foncé identique à la couleur initiale de fond pour le bouton.

• Enregistrer les modifications (CTRL + S) puis exécuter le formulaire (F5),
• Déplacer le curseur de la souris sur le bouton Ajouter,

Comme vous pouvez le voir, celui-ci change instantanément d'aspect. Si vous sortez de la zone d'influence du bouton, ce dernier retrouve ses attributs de format réglés par défaut. Nous devons maintenant appliquer les mêmes réglages au bouton Annuler. Et comme il s'agit de réglages de mise en forme, il n'est pas nécessaire de les refaire. Nous pouvons les répliquer.

• Revenir dans la vue en conception du formulaire,
• Cliquer sur le bouton Ajouter pour le sélectionner à nouveau,
• En haut à droite de la fenêtre Access, cliquer sur l'onglet Format pour activer son ruban,
• Dans la section Police du ruban, cliquer sur l'outil du pinceau,

Cet outil se nomme Reproduire la mise en forme. Il permet de prélever les attributs du contrôle sélectionné. Ici, il s'agit du bouton Ajouter. Dès lors, en cliquant sur un contrôle de destination, il permet de répliquer exactement les mêmes réglages.

• Cliquer sur le bouton Annuler pour reproduire les réglages visuels,
• Enregistrer le formulaire puis l'exécuter,

Comme vous pouvez le voir, l'aspect des deux boutons change au survol de la souris et redevient normal dès lors que la zone d'influence est quittée.