<a href="" class="button-link__link" title="">[[Fichier:|x40px|center|link=|alt=]]</a>
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)
| 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
-
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
discordDiscord
Blurple (#5865f2)
patreonPatreon
Rouge (#ff424d)
gitlabGitLab
Orange (#fc6f23)
githubGitHub
Sombre (#24292e)
twitterTwitter/X
Bleu (#1da1f2)
youtubeYouTube
Rouge (#ff0000)
twitchTwitch
Violet (#9146ff)
redditReddit
Orange (#ff4500)
mastodonMastodon
Violet (#6364ff)
blueskyBluesky
Bleu (#0085ff)
linkedinLinkedIn
Bleu (#0077b5)
facebookFacebook
Bleu (#1877f2)
instagramInstagram
Dégradé
tiktokTikTok
Noir (#000000)
snapchatSnapchat
Jaune (#fffc00)
threadsThreads
Noir (#000000)
Développement & Tech
Code
Plateforme
Couleur
Exemple
stackoverflowStack Overflow
Orange (#f48024)
npmnpm
Rouge (#cb3837)
pypiPyPI
Bleu (#3775a9)
dockerDocker
Bleu (#2496ed)
kubernetesKubernetes
Bleu (#326ce5)
codepenCodePen
Noir (#000000)
gitlab-ciGitLab CI
Orange (#fc6d26)
Plateformes de financement
Code
Plateforme
Couleur
Exemple
kofiKo-fi
Rouge (#ff5e5b)
liberapayLiberapay
Jaune (#f6c915)
buymeacoffeeBuy Me a Coffee
Jaune (#ffdd00)
opencollectiveOpen Collective
Bleu (#7fadf2)
Plateformes de plugins Minecraft
Code
Plateforme
Couleur
Exemple
modrinthModrinth
Vert (#1bd96a)
curseforgeCurseForge
Orange (#f16436)
hangarHangar
Bleu (#0d6efd)
spigotmc / spigotSpigotMC
Jaune (#f7c03e)
bukkitBukkit
Orange (#f89a1e)
papermc / paperPaperMC
Bleu (#1a8cff)
purpurPurpur
Violet (#a855f7)
polymartPolymart
Rose (#ec4899)
github-releasesGitHub Releases
Vert (#238636)
jenkinsJenkins
Rouge (#d24939)
mavenMaven
Rouge (#c71a36)
Mod loaders Minecraft
Code
Plateforme
Couleur
Exemple
minecraftMinecraft
Vert (#62b47a)
forgeForge
Bleu foncé (#1e2c42)
fabricFabric
Beige (#dbd3c8)
quiltQuilt
Violet (#8b5cf6)
neoforgeNeoForge
Orange (#ff6b35)
Logiciels serveur
Code
Plateforme
Couleur
Exemple
velocityVelocity
Bleu (#3fa9f5)
waterfallWaterfall
Bleu (#0088ff)
bungeecordBungeeCord
Jaune (#ffcc00)
spongeSponge
Jaune (#f7cf0d)
Modpacks
Code
Plateforme
Couleur
Exemple
ftb / feed-the-beastFeed The Beast
Violet (#8e44ad)
technicTechnic Pack
Rouge (#e74c3c)
atlauncherATLauncher
Bleu (#3498db)
Couleurs sémantiques
Code
Alternative
Couleur
Usage
primaryblueBleu (#3366cc)
Actions principales
secondarygray, greyGris (#72777d)
Actions secondaires
successgreenVert (#14866d)
Messages de succès
dangerredRouge (#d73333)
Avertissements, erreurs
warningyellowJaune (#fc3)
Alertes
infocyanCyan (#00b8d4)
Informations
purplevioletViolet (#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
|image = Discord-Logo-White.svg
|text = Rejoignez notre Discord
|color = discord
}}
Sans texte (icône seule) {{ButtonLink
|link = https://github.com/nefald
|image = GitHub-Logo-White.svg
|color = github
}}
Lien interne {{ButtonLink
|link = /wiki/Aide:Sommaire
|image = Help-Icon.svg
|text = Centre d'aide
|color = primary
}}
Couleur personnalisée {{ButtonLink
|link = https://exemple.fr
|image = Custom-Logo.svg
|text = Bouton personnalisé
|bg = linear-gradient(135deg, #667eea 0%, #764ba2 100%)
}}
Grille de téléchargements multi-plateformes <div class="button-link-grid">
{{ButtonLink
|link = https://modrinth.com/plugin/mon-plugin
|image = Modrinth-Logo.svg
|text = Modrinth
|color = modrinth
}}
{{ButtonLink
|link = https://www.curseforge.com/minecraft/bukkit-plugins/mon-plugin
|image = CurseForge-Logo.svg
|text = CurseForge
|color = curseforge
}}
{{ButtonLink
|link = https://hangar.papermc.io/nefald/MonPlugin
|image = Hangar-Logo.svg
|text = Hangar
|color = hangar
}}
{{ButtonLink
|link = https://www.spigotmc.org/resources/mon-plugin.12345/
|image = Spigot-Logo.svg
|text = SpigotMC
|color = spigot
}}
{{ButtonLink
|link = https://polymart.org/resource/mon-plugin.1234
|image = Polymart-Logo.svg
|text = Polymart
|color = polymart
}}
{{ButtonLink
|link = https://github.com/nefald/MonPlugin/releases
|image = GitHub-Logo-White.svg
|text = GitHub
|color = github-releases
}}
</div>
Rangée de réseaux sociaux <div class="button-link-grid">
{{ButtonLink|link=https://discord.gg/xxx|image=Discord-Logo-White.svg|color=discord}}
{{ButtonLink|link=https://twitter.com/xxx|image=Twitter-Logo-White.svg|color=twitter}}
{{ButtonLink|link=https://github.com/xxx|image=GitHub-Logo-White.svg|color=github}}
{{ButtonLink|link=https://www.patreon.com/xxx|image=Patreon-Logo-White.svg|color=patreon}}
</div>
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 et internes
Aucun JavaScript requis
Compatible tous navigateurs modernes
Les icônes de lien externe sont automatiquement masquées Accessibilité Le modèle est conçu pour être accessible :
Utilisation d'attributs alt pour les images
Attributs title pour les infobulles
Contraste de couleur respectant les normes WCAG
Navigation au clavier possible
Compatible avec les lecteurs d'écran Voir aussi
