Modèle:ButtonLink/doc

Utilisation

Ce modèle crée un bouton cliquable stylisé avec icône/logo pointant vers n'importe quelle destination (réseaux sociaux, services externes, pages internes, plateformes de téléchargement, etc.).

Syntaxe

{{ButtonLink
|link       = URL du lien
|image      = Nom du fichier image (avec extension)
|align      = Alignement du bouton : left, right, center
|text       = Texte affiché (optionnel)
|color      = Nom de couleur prédéfinie (optionnel)
|bg         = Couleur d'arrière-plan personnalisée (optionnel, remplace color)
|size       = Taille de l'image (défaut : x40px)
|title      = Texte du titre au survol (défaut : valeur de text)
|alt        = Texte alternatif (défaut : valeur de text)
}}

Paramètres

Paramètre	Description	Requis	Défaut
link	URL complète ou relative	Oui	-
image	Nom du fichier image (ex : "Discord-Logo-White.svg")	Non	-
align	Alignement du bouton sur la page	Non	(vide)
text	Texte affiché sous le logo	Non	(vide)
color	Nom de couleur prédéfinie	Non	gray
bg	Couleur d'arrière-plan personnalisée (hex, rgb, nom)	Non	(utilise color ou défaut)
size	Taille de l'image (format MediaWiki)	Non	x40px
title	Texte du titre HTML (infobulle au survol)	Non	valeur de text
alt	Texte alternatif pour l'accessibilité	Non	valeur de text

• Lorsque color est spécifié, le logo du site choisi sera affiché.
• Si color et bg sont tous deux spécifiés, bg est prioritaire.

Couleurs prédéfinies

Réseaux sociaux

Code	Plateforme	Couleur	Exemple
discord	Discord	violet (#5865f2)
twitter	Twitter/X	Bleu (#1da1f2)
youtube	YouTube	Rouge (#ff0000)
twitch	Twitch	Violet (#9146ff)
reddit	Reddit	Orange (#ff4500)
mastodon	Mastodon	Violet (#6364ff)
bluesky	Bluesky	Bleu (#0085ff)
linkedin	LinkedIn	Bleu (#0077b5)	Fichier:ButtonLink-linkedin.svg
facebook	Facebook	Bleu (#1877f2)	Fichier:ButtonLink-facebook.svg
instagram	Instagram	Dégradé
tiktok	TikTok	Noir (#000000)
snapchat	Snapchat	Jaune (#fffc00)
threads	Threads	Noir (#000000)

Développement & Tech

Code	Plateforme	Couleur	Exemple
stackoverflow	Stack Overflow	Noir (#252627)	Fichier:ButtonLink-stackoverflow.svg
npm	npm	Rouge (#cb3837)	Erreur lors de la création de la vignette : The resulting image would be larger than 32767 pixels on either dimension. Librsvg currently cannot render to images bigger than that. Please specify a smaller size. convert: delegate failed `'rsvg-convert' --dpi-x %x --dpi-y %y -o '%o' '%i @ error/delegate.c/InvokeDelegate/1919. convert: unable to open file '/tmp/magick-ivDwDZLigcsqyE3xQmfcK7XUBD5K9zKm': No such file or directory @ error/constitute.c/ReadImage/785. convert: no images defined `PNG:/tmp/transform_fdbdf09c6530.png' @ error/deprecate.c/ConvertImageCommand/3366.
pypi	PyPI	Bleu (#3775a9)	Fichier:ButtonLink-pypi.svg
docker	Docker	Bleu (#2496ed)
kubernetes	Kubernetes	Bleu (#326ce5)	Fichier:ButtonLink-kubernetes.svg
codepen	CodePen	Blanc (#ffffff)
gitlab	GitLab	Orange (#fc6f23)
github	GitHub	Sombre (#24292e)

Plateformes de financement

Code	Plateforme	Couleur	Exemple
patreon	Patreon	Rouge (#ff424d)
kofi	Ko-fi	Rouge (#ff5e5b)
liberapay	Liberapay	Jaune (#f6c915)
buymeacoffee	Buy Me a Coffee	Jaune (#ffdd00)
opencollective	Open Collective	Bleu (#7fadf2)
stripe	Stripe	Violet (#635BFF)	Fichier:ButtonLink-stripe.svg

Plateformes de plugins Minecraft

Code	Plateforme	Couleur	Exemple
modrinth	Modrinth	Vert (#1bd96a)
curseforge	CurseForge	Orange (#f16436)	Fichier:ButtonLink-curseforge.svg
hangar	Hangar	Bleu (#0d6efd)	Fichier:ButtonLink-hangar.svg
spigotmc / spigot	SpigotMC	Jaune (#f7c03e)	Fichier:ButtonLink-spigot.svg
bukkit	Bukkit	Orange (#f89a1e)	Fichier:ButtonLink-bukkit.svg
paper / paper	PaperMC	Bleu (#1a8cff)	Fichier:ButtonLink-paper.svg
purpur	Purpur	Violet (#a855f7)	Fichier:ButtonLink-purpur.svg
polymart	Polymart	Rose (#ec4899)	Fichier:ButtonLink-polymart.svg
github-releases	GitHub Releases	Vert (#238636)	Fichier:ButtonLink-github-releases.svg
jenkins	Jenkins	Rouge (#d24939)	Fichier:ButtonLink-jenkins.svg
maven	Maven	Rouge (#c71a36)	Fichier:ButtonLink-maven.svg

Mod loaders Minecraft

Code	Plateforme	Couleur	Exemple
minecraft	Minecraft	Vert (#62b47a)
forge	Forge	Bleu foncé (#1e2c42)	Fichier:ButtonLink-forge.svg
fabric	Fabric	Beige (#dbd3c8)	Fichier:ButtonLink-fabric.svg
quilt	Quilt	Violet (#8b5cf6)	Fichier:ButtonLink-quilt.svg
neoforge	NeoForge	Orange (#ff6b35)	Fichier:ButtonLink-neoforge.svg

Logiciels serveur

Code	Plateforme	Couleur	Exemple
velocity	Velocity	Bleu (#3fa9f5)	Fichier:ButtonLink-velocity.svg
waterfall	Waterfall	Bleu (#0088ff)	Fichier:ButtonLink-waterfall.svg
bungeecord	BungeeCord	Jaune (#ffcc00)	Fichier:ButtonLink-bungeecord.svg
sponge	Sponge	Jaune (#f7cf0d)	Fichier:ButtonLink-sponge.svg

Modpacks

Code	Plateforme	Couleur	Exemple
ftb / feed-the-beast	Feed The Beast	Violet (#8e44ad)	Fichier:ButtonLink-ftb.svg
technic	Technic Pack	Rouge (#e74c3c)	Fichier:ButtonLink-technic.svg
atlauncher	ATLauncher	Bleu (#3498db)	Fichier:ButtonLink-atlauncher.svg

Couleurs sémantiques

Code	Alternative	Couleur	Usage
primary	blue	Bleu (#3366cc)	Actions principales
secondary	gray, grey	Gris (#72777d)	Actions secondaires
success	green	Vert (#14866d)	Messages de succès
danger	red	Rouge (#d73333)	Avertissements, erreurs
warning	yellow	Jaune (#fc3)	Alertes
info	cyan	Cyan (#00b8d4)	Informations
purple	violet	Violet (#6f42c1)	-
pink	-	Rose (#d63384)	-
orange	-	Orange (#fd7e14)	-
teal	-	Turquoise (#20c997)	-
indigo	-	Indigo (#6610f2)	-
black	-	Noir (#000)	-
white	-	Blanc (#fff)	-
light	-	Gris clair (#f8f9fa)	-
dark	-	Gris foncé (#343a40)	-

Exemples

Usage basique

{{ButtonLink
|link  = https://nfald.fr/discord
|text  = Rejoignez notre communauté
|color = discord
}}

Rejoignez notre Discord

Sans texte (icône seule)

{{ButtonLink
|link  = https://github.com/nefald
|color = github
}}

Couleur personnalisée

{{ButtonLink
|link  = https://exemple.fr
|image = Custom-Logo.svg
|text  = Bouton personnalisé
|bg    = linear-gradient(135deg, #667eea 0%, #764ba2 100%)
}}

Boutons d'actions

<div class="button-link-grid">
{{ButtonLink
|link  = /wiki/Spécial:Téléverser
|image = Upload-Icon.svg
|text  = Téléverser un fichier
|color = primary
}}
{{ButtonLink
|link  = /wiki/Spécial:Modifications_récentes
|image = Recent-Changes-Icon.svg
|text  = Modifications récentes
|color = info
}}
{{ButtonLink
|link  = /wiki/Spécial:Pages_demandées
|image = Wanted-Pages-Icon.svg
|text  = Pages demandées
|color = warning
}}
</div>

Détails techniques

• Utilise TemplateStyles pour un CSS isolé
• Entièrement responsive (adapté mobile)
• Accessible (supporte les attributs alt et title)
• Supporte les liens externes
• Aucun JavaScript requis
• Compatible tous navigateurs modernes
• Les icônes de lien externe sont automatiquement masquées

Voir aussi

• Modèle:Bouton
• Modèle:Icône
• Modèle:Bandeau
• Modèle:Couleur
• Aide:Modèles