Changer un lien en un bouton

Bonjour
https://joomtest.88h.ovh/fr/
Pourriez-vous m'indiquer le code pour changer le visuel d'un lien dans un bouton avec un coin arrondi ?
De manière moins importante ou urgente, je cherche un moyen de mettre en valeur le titre avec les boutons en dessous. Exemple encadré mais pas sûr que cela soit possible dans mon cas, vu que c'est généré par un cms.
Je n'ai donc pas entièrement la main
@+

Bonjour,

Le lien ne marche pas !

Amicalement,

Bonjour
Ok cela refonctionne !!

Merci

HDcms a écrit :

Pourriez-vous m'indiquer le code pour changer le visuel d'un lien dans un bouton avec un coin arrondi ?

Tu parles de quel liens/boutons sur ton site ?

Re
Ah effectivement en parlant de mon site c'est sur le côté droit
Titre (titre)
|- créer un article (url)
|- créer un événement (url)
Titre2 (titre)
|- blog2 (url)

Ok,

Les elements sont déjà dans une "box" avec des coins arrondies. Du coup qu'elle est ta demande exact (désolé si je te fais répété)

Si tu veux avoir comme le boutton "précédent" il faut rajouter ce css :

display: inline-block;
    font-size: 0.785rem;
    padding: 1rem 2.5rem;
    border-radius: 100px;
    border: 1px solid #ededed;
    color: #252525;

Tu ne fais pas répété, je n'ai pas été clair
Sur le site réel , j'ai un menu assez long.
Les membres ne distinguent pas bien les titres, les urls ...

** la priorité est de transformer les liens en boutons .
ex. "créer un article" dans un bouton orange arrondie

* moins important mais j'aurai souhaité entouré le titre avec seulement les liens en dessous.
Mais cela me semble difficile, sinon je mettrai le titre au centre en gras

re
Bon je n'y arrive pas
j'ai ajouté un terme pour identifier le menu
* je n'arrive pas à faire le bouton
* plutôt qu'encadré le titre et les liens en dessous. Je souhaite mettre un espace (en test) au dessus des chaque titre pour le mettre en valeur

J'ai mis cela

menugestion-tableau-bord  span.nav-header {
    font-size:200%;   
    color: #e5f;
}

.menugestion-tableau-bord  .menu-deeper .menu-parent {
	margin-top:50px;
/* border: 2px solid #000;*/
}
.menugestion-tableau-bord a {
display: inline-block;
    font-size: 0.785rem;
    padding: 1rem 2.5rem;
    border-radius: 100px;
    border: 2px solid #fff;
    color: #fff;
}

Bonjour,

1) Dans tes css, il y a plein d'autres instructions qui interfèrent avec ce que tu essaies de faire.

Par exemple, dans default.css, il y a :

.sp-module ul > li > a {
  color: #252525;
}

or le sélecteur ".sp-module ul > li > a" est assez puissant et va être prioritaire sur ".menugestion-tableau-bord a" que tu emploies.

Utilise comme sélecteur par exemple ".sp-module ul.menugestion-tableau-bord ul > li > a" qui devrait être plus fort que le sélecteur ".sp-module ul > li > a".

2) Pour transformer ta balise "a" en bouton orange, il faut rajouter un background: orange.

Par exemple :

.sp-module ul.menugestion-tableau-bord ul > li > a {
    display: inline-block;
    font-size: 0.785rem;
    padding: 1rem 2.5rem;
    border-radius: 100px;
    border: 0;
    color: #fff;
    background: orange;
}

3) Pour rajouter des espaces au dessus des titres, tu peux rajouter un margin-top pour ces titres (toujours en choisissant un sélecteur fort pour que ce soit bien pris en compte).

Amicalement,

Bonjour
@parsimonhi
Merci pour ton apport.
Je n'avais pas vu et effectivement connaisse pas ce poids différent. J'aurai eu tendance à mettre !important !!!!

déjà 1er question, vous utilisez rem.je connaissais px, % ...
qu'est-ce ?
quel avantage par rapport aux autres ?
est-ce meilleur pour l'aspect responsive ( car ce sont des liens de menus dans une colonne, il faudrait donc qu'il soit lisible partout) ?

J'ai mis

padding: 2px, 2px, 2px, 5px;

par ce que j'avai appris (il y a longtemps) mais j'ai l'impression que c'est le mauvais élément
l'objectif étant de diminuer la hauteur haut et bas pour coller plus de bouton (une dizaine) et décaler le lien un peu vers la droite pour qu'il ne colle pas

question subsidiaire: peut-être que l'aspect rectangulaire serait plus lisible ? a vos avis ?

Cool, cela prend forme
Bonne journée

Bonjour,

HDcms a écrit :
J'aurai eu tendance à mettre !important !!!!

!important, c'est uniquement pour les cas où on n'a pas d'autres solutions.

HDcms a écrit :
vous utilisez rem ... qu'est-ce ?

1 rem = taille de la police du navigateur.

L'intérêt, c'est que si l'utilisateur a du mal à voir les petites polices de caractères, et qu'il a par exemple changé la police par défaut de son navigateur, les textes seront affichés dans la taille choisie par l'utilisateur. Ensuite, on peut utiliser aussi cette unité pour les autres dimensions. Ainsi, tout sera agrandi proportionnellement. Pour tester ce que ça donne, il suffit de changer la taille de la police par défaut du navigateur.

D'une manière générale, je conseille d'utiliser aussi souvent que possible rem et em (taille de la police de l'élément). Mais dans certains cas, en particulier pour les bordures, les px peuvent être le meilleur choix.

HDcms a écrit :
J'ai mis

padding: 2px, 2px, 2px, 5px;

parce que j'avais appris (il y a longtemps) mais j'ai l'impression que c'est le mauvais élément
l'objectif étant de diminuer la hauteur haut et bas pour coller plus de bouton (une dizaine) et décaler le lien un peu vers la droite pour qu'il ne colle pas.

Un padding ajoute de l'espace autour de l'élément, mais cet espace a le même fond que le reste de l'élément.

Un margin ajoute de l'espace autour de l'élément, mais le fond est celui de l'élément parent. Souvent, on utilise les deux, en particulier quand le fond de l'élément est différent de celui de son parent.

HDcms a écrit :
question subsidiaire: peut-être que l'aspect rectangulaire serait plus lisible ? a vos avis ?

Je suis moyen voire nul en design ! Du coup, j'évite de donner des conseils dans ce domaine-là !

Mais déjà, tu peux t'inspirer du design de sites qui te plaisent.

Amicalement,

Rebonjour
ok merci pour ces précisions
peux-tu regarder le site pour l'amélioration du bouton (comme précisé plus haut)?
car en l'état c'est moche
Pour le titre, je vais jouer sur la taille et peut-être le centrage
Merci
@+

Bonjour,

Ça semble fonctionner. Après, bon, ça flashe !

Si tu mets une police en blanc sur fond orange, tu peux envisager de mettre un font-weight:bold dans le css pour l'élément correspondant, de manière à ce qu'il soit plus lisible.

EDIT: pour les boutons, tu peux essayer de faire comme ceux du slte alsacreations : ils sont pas mal (oui, bon, je fayote un peu, mais c'est pour une bonne cause).

Amicalement,
Modifié par parsimonhi (22 Jan 2019 - 16:33)

re
ben mon css avec les padding ne fonctionne pas vraiment car je voudrai décaler sur la droite le lien et aplatir (diminution haut et bas)
les boutons du site en bas du formulaire. oui ils sont bien mais j'ai beaucoup de boutons
Bon j'essaie encore un peu

re
bon j'abandonne l'idée des boutons qui dans le site réel serait probabelemnt très moche
Du coup je suis parti pour jouer plus simplement sur l'état du lien (couleur et soulignement) et cela ne fonctionne pas
Je pense pourtant être parti sur tes conseils.
Merci pour me dire ce qui fonctionnerait
@+
ps: si c'est possible de diminuer encore l'espace (hauteur) entre 2 liens, ce serait top

.sp-module ul.menugestion-tableau-bord ul > li > a  {
  text-decoration: underline;
  color: #a00;
}
.sp-module ul.menugestion-tableau-bord ul > li > a :visited {
  color: #844;
  text-decoration: underline overline #FF3028;
}
.sp-module ul.menugestion-tableau-bord ul > li > a :hover{
  text-decoration: green wavy underline;
  color: white;
  background: #800;
}

.menugestion-tableau-bord  span.nav-header {
    font-size:1,5rem;
    padding: 0rem 0rem 0rem 1.2rem;
    font-weight : 800;
}

je me suis basé sur
https://developer.mozilla.org/fr/docs/Web/CSS/text-decoration
https://www.alsacreations.com/astuce/lire/43-comment-dfinir-lapparence-de-ses-liens.html
Modifié par HDcms (22 Jan 2019 - 17:45)

Bonjour,

Il ne faut pas d'espace entre "a" et ":visited". Ce ":visited" concerne les éléments "a". Tel que tu l'as écris, cela voudrait dire qu'il concerne les éléments contenus dans "a".

Pareil pour ":hover".

Pour la hauteur de l'élément "a", tu peux diminuer son line-height en mettant par exemple 1.5em au lieu de 36px.

EDIT: pour souligner et surligner, tu peux aussi utiliser des border-bottom et border-top. Peut-être plus facile à gérer.

Amicalement,
Modifié par parsimonhi (22 Jan 2019 - 17:59)

re
ok j'y suis presque. Quleques différences entre chrome et firefox mais je trouve cela pas mal
Le seul truc que je n'arrive pas à terminer, c'est l'espacement entre chaque lien
J'ai l'impression que line-height n'est pas pris en compte (important)
@+
pour rendre plus jolie, j'aimerai mettre une "*" ou un ">" devant le lien, je sais que c'est possible mais ne me souvient plus du terme. amoisn que cela ne soit possible avec directement les li ??

.sp-module ul.menugestion-tableau-bord ul > li > a  {
  text-decoration: underline;  
  line-height: 3.5em;
}
.sp-module ul.menugestion-tableau-bord ul > li > a:visited {
  color:green;
 /* text-decoration: underline overline #FF3028; */
}
.sp-module ul.menugestion-tableau-bord ul > li > a:hover{
  text-decoration:  #a00 wavy underline;
  color: #a00;
}

.menugestion-tableau-bord  span.nav-header {
    font-size:1,5rem;
    padding: 0rem 0rem 0rem 1.2rem;
    font-weight : 800;
}

Bonjour,

Pour le line-height, c'est 1.5rem (avec un point) et non pas 1,5rem (avec une virgule).

Un "*" devant un lien :

.sp-module ul.menugestion-tableau-bord ul > li > a:before  {
  content: "*";
}

Amicalement,

Bonsoir
ok merci mais décidément il y a qq chose qui m'échappe pour l'espacement car je ne vois aucun effet ne exagérant l'espacement

 .sp-module ul.menugestion-tableau-bord ul > li > a  {
  text-decoration: underline;  
  line-height: 3.5rem;
}

pour le "*" cela fonctionne. effet de bord , i lest aussi souligné mais bon je peux vivre avec
Bonne soirée