Illustration du fonctionnement du cerveau mettant en avant les interactions entre les mécanismes cognitifs et émotionnels lors d’un accompagnement en hypnose et coaching.
Ces intitulés sont optimisés pour le référencement tout en restant naturels, ce qui est exactement ce que recherche Google.
aujourd’hui 10:27
Peux-tu me dire si je peux changer la couleur de ce bouton ?
Découvrir
Oui. La couleur n’est pas définie dans le HTML que tu montres, mais dans la classe CSS .carte-ronde-bouton.
Tu as plusieurs possibilités :
Si tu veux un bouton vert comme le reste du site (#708C79)
Dans le CSS, cherche :
.carte-ronde-bouton {
background: …;
}
et remplace par :
.carte-ronde-bouton {
background: #708C79;
color: #fff;
}
Tu peux aussi ajouter un effet au survol :
.carte-ronde-bouton:hover {
background: #5f7968;
}
Si tu ne trouves pas le CSS
Tu peux directement modifier le HTML :
Découvrir
Si tu veux aussi changer la bordure
Découvrir
Si tu me montres le CSS de .carte-ronde-bouton, je peux te dire exactement quelles lignes modifier pour conserver le style actuel (arrondi, animation, ombre, etc.) tout en changeant uniquement la couleur.
Bien sûr. Il suffit d’ajouter un style directement sur le lien :
Si tu souhaites également conserver un effet au survol (hover), ajoute ce CSS :
.carte-ronde-bouton:hover{
background:#e67311;
border-color:#e67311;
color:#ffffff;
}
Le bouton sera ainsi de la même couleur orange que le reste de ton identité visuelle (#F38223).
J’aimerai que le Découvrir soit au centre du bouton verticalement et horizontalement, fait moi le code Html
Le plus propre est d’utiliser Flexbox. Le texte sera parfaitement centré, quel que soit le navigateur.
Si tu souhaites conserver la classe .carte-ronde-bouton et ne modifier que le centrage, ajoute simplement ces propriétés à ton bouton actuel :
display:flex;
justify-content:center;
align-items:center;
line-height:1;
Le texte sera alors parfaitement centré horizontalement et verticalement.
Non, reprend ce code html et replace moi découvrir comme sur les boutons sur la photo
Le rendu de la photo est obtenu en centrant le texte et en laissant un espace réservé à droite pour l’icône (même si tu n’en mets pas). Le texte est donc légèrement décalé vers la gauche mais paraît parfaitement centré visuellement.
Essaie ce code :
Découvrir
Si tu veux exactement le même style que sur la photo (avec la flèche à droite), utilise plutôt celui-ci :
Découvrir
›
Ce deuxième code reproduit quasiment à l’identique la disposition des boutons de ton exemple (texte centré + flèche à droite).