Basculer le menu
Changer de menu des préférences
Basculer le menu personnel
Non connecté(e)
Votre adresse IP sera visible au public si vous faites des modifications.

« Modèle:Button/doc » : différence entre les versions

De Nefald
Hiob (discussion | contributions)
m Ajout hello asso
Hiob (discussion | contributions)
Aucun résumé des modifications
Balise : Révoqué
Ligne 1 : Ligne 1 :
== Utilisation ==
== 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.).
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.). Le lien est cliquable sur toute la surface du bouton.


=== Syntaxe ===
=== Syntaxe ===
Ligne 8 : Ligne 7 :
<syntaxhighlight lang="mediawiki">
<syntaxhighlight lang="mediawiki">
{{ButtonLink
{{ButtonLink
|link       = URL du lien
|link             = URL du lien
|image     = Nom du fichier image (avec extension)
|text              = Texte affiché (optionnel)
|align     = Alignement du bouton : left, right, center
|logo              = Nom du preset (couleur + logo par défaut)
|text      = Texte affiché (optionnel)
|image             = Nom du fichier image personnalisé (remplace le logo du preset)
|color      = Nom de couleur prédéfinie (optionnel)
|position          = Position de l'image : center (défaut), left, right
|bg        = Couleur d'arrière-plan personnalisée (optionnel, remplace color)
|align             = Alignement du bouton sur la page : left, center, right
|size      = Taille de l'image (défaut : x40px)
|size              = Taille de l'image (défaut : x80px)
|title      = Texte du titre au survol (défaut : valeur de text)
|background        = Couleur d'arrière-plan personnalisée (remplace la couleur du preset)
|alt       = Texte alternatif (défaut : valeur de text)
|image-background  = Couleur de fond de l'image (utile pour QR codes)
|noimage          = oui pour masquer l'image
|alt               = Texte alternatif (défaut : valeur de text)
}}
}}
</syntaxhighlight>
</syntaxhighlight>
Ligne 27 : Ligne 28 :
| '''link''' || URL complète ou relative || Oui || -
| '''link''' || URL complète ou relative || Oui || -
|-
|-
| '''image''' || Nom du fichier image (ex : "Discord-Logo-White.svg") || Non || -
| '''text''' || Texte affiché dans le bouton || Non || (vide)
|-
| '''logo''' || Nom du preset prédéfini (ex : "discord", "github", "helloasso") || Non || gray
|-
| '''image''' || Nom du fichier image personnalisé (ex : "Custom-Logo.svg") || Non || Logo du preset ou ButtonLink-gray.svg
|-
|-
| '''align''' || Alignement du bouton sur la page || Non || (vide)
| '''position''' || Position de l'image : "center" (au-dessus), "left" (à gauche), "right" (à droite) || Non || center
|-
|-
| '''text''' || Texte affiché sous le logo || Non || (vide)
| '''align''' || Alignement du bouton sur la page : "left", "center", "right" || Non || (vide)
|-
|-
| '''color''' || Nom de couleur prédéfinie || Non || gray
| '''size''' || Taille de l'image (format MediaWiki) || Non || x80px
|-
|-
| '''bg''' || Couleur d'arrière-plan personnalisée (hex, rgb, nom) || Non || (utilise color ou défaut)
| '''background''' || Couleur d'arrière-plan personnalisée (hex, rgb, gradient) || Non || (utilise la couleur du preset)
|-
|-
| '''size''' || Taille de l'image (format MediaWiki) || Non || x40px
| '''image-background''' || Couleur de fond derrière l'image (utile pour QR codes) || Non || transparent
|-
|-
| '''title''' || Texte du titre HTML (infobulle au survol) || Non || valeur de '''text'''
| '''noimage''' || Mettre "oui" pour masquer complètement l'image || Non || (vide)
|-
|-
| '''alt''' || Texte alternatif pour l'accessibilité || Non || valeur de '''text'''
| '''alt''' || Texte alternatif pour l'accessibilité || Non || valeur de '''text'''
Ligne 46 : Ligne 51 :
{{Bandeau|type=astuce
{{Bandeau|type=astuce
|
|
* Lorsque '''color''' est spécifié, le logo du site choisi sera affiché.
* Le paramètre '''logo''' définit automatiquement la couleur du bouton ET l'image par défaut
* Si '''color''' et '''bg''' sont tous deux spécifiés, '''bg''' est prioritaire.}}
* '''image''' permet de remplacer le logo par défaut tout en gardant la couleur du preset
* '''background''' remplace complètement la couleur du preset
* '''image-background''' ajoute un fond blanc/coloré derrière l'image (idéal pour QR codes)
}}


== Couleurs prédéfinies ==
== Presets disponibles (logo=) ==


=== Réseaux sociaux ===
=== Réseaux sociaux ===
Ligne 56 : Ligne 64 :
! Code !! Plateforme !! Couleur !! Exemple
! Code !! Plateforme !! Couleur !! Exemple
|-
|-
| <code>discord</code> || Discord || violet (#5865f2) || {{ButtonLink|link=https://wiki.nefald.fr/|color=discord}}
| <code>discord</code> || Discord || Violet (#5865f2) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=discord}}
|-
|-
| <code>twitter</code> || Twitter/X || Bleu (#1da1f2) || {{ButtonLink|link=https://wiki.nefald.fr/|color=twitter}}
| <code>twitter</code> || Twitter/X || Bleu (#1da1f2) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=twitter}}
|-
|-
| <code>youtube</code> || YouTube || Rouge (#ff0000) || {{ButtonLink|link=https://wiki.nefald.fr/|color=youtube}}
| <code>youtube</code> || YouTube || Rouge (#ff0000) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=youtube}}
|-
|-
| <code>twitch</code> || Twitch || Violet (#9146ff) || {{ButtonLink|link=https://wiki.nefald.fr/|color=twitch}}
| <code>twitch</code> || Twitch || Violet (#9146ff) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=twitch}}
|-
|-
| <code>reddit</code> || Reddit || Orange (#ff4500) || {{ButtonLink|link=https://wiki.nefald.fr/|color=reddit}}
| <code>reddit</code> || Reddit || Orange (#ff4500) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=reddit}}
|-
|-
| <code>mastodon</code> || Mastodon || Violet (#6364ff) || {{ButtonLink|link=https://wiki.nefald.fr/|color=mastodon}}
| <code>mastodon</code> || Mastodon || Violet (#6364ff) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=mastodon}}
|-
|-
| <code>bluesky</code> || Bluesky || Bleu (#0085ff) || {{ButtonLink|link=https://wiki.nefald.fr/|color=bluesky}}
| <code>bluesky</code> || Bluesky || Bleu (#0085ff) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=bluesky}}
|-
|-
| <code>linkedin</code> || LinkedIn || Bleu (#0077b5) || {{ButtonLink|link=https://wiki.nefald.fr/|color=linkedin}}
| <code>linkedin</code> || LinkedIn || Bleu (#0077b5) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=linkedin}}
|-
|-
| <code>facebook</code> || Facebook || Bleu (#1877f2) || {{ButtonLink|link=https://wiki.nefald.fr/|color=facebook}}
| <code>facebook</code> || Facebook || Bleu (#1877f2) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=facebook}}
|-
|-
| <code>instagram</code> || Instagram || Dégradé || {{ButtonLink|link=https://wiki.nefald.fr/|color=instagram}}
| <code>instagram</code> || Instagram || Dégradé || {{ButtonLink|link=https://wiki.nefald.fr/|logo=instagram}}
|-
|-
| <code>tiktok</code> || TikTok || Noir (#000000) || {{ButtonLink|link=https://wiki.nefald.fr/|color=tiktok}}
| <code>tiktok</code> || TikTok || Noir (#000000) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=tiktok}}
|-
|-
| <code>snapchat</code> || Snapchat || Jaune (#fffc00) || {{ButtonLink|link=https://wiki.nefald.fr/|color=snapchat}}
| <code>snapchat</code> || Snapchat || Jaune (#fffc00) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=snapchat}}
|-
|-
| <code>threads</code> || Threads || Noir (#000000) || {{ButtonLink|link=https://wiki.nefald.fr/|color=threads}}
| <code>threads</code> || Threads || Noir (#000000) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=threads}}
|}
|}


Ligne 88 : Ligne 96 :
! Code !! Plateforme !! Couleur !! Exemple
! Code !! Plateforme !! Couleur !! Exemple
|-
|-
| <code>stackoverflow</code> || Stack Overflow || Noir (#252627) || {{ButtonLink|link=https://wiki.nefald.fr/|color=stackoverflow}}
| <code>stackoverflow</code> || Stack Overflow || Noir (#252627) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=stackoverflow}}
|-
|-
| <code>npm</code> || npm || Rouge (#cb3837) || {{ButtonLink|link=https://wiki.nefald.fr/|color=npm}}
| <code>npm</code> || npm || Rouge (#cb3837) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=npm}}
|-
|-
| <code>pypi</code> || PyPI || Bleu (#3775a9) || {{ButtonLink|link=https://wiki.nefald.fr/|color=pypi}}
| <code>pypi</code> || PyPI || Bleu (#3775a9) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=pypi}}
|-
|-
| <code>docker</code> || Docker || Bleu (#2496ed) || {{ButtonLink|link=https://wiki.nefald.fr/|color=docker}}
| <code>docker</code> || Docker || Bleu (#2496ed) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=docker}}
|-
|-
| <code>kubernetes</code> || Kubernetes || Bleu (#326ce5) || {{ButtonLink|link=https://wiki.nefald.fr/|color=kubernetes}}
| <code>kubernetes</code> || Kubernetes || Bleu (#326ce5) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=kubernetes}}
|-
|-
| <code>codepen</code> || CodePen || Blanc (#ffffff) || {{ButtonLink|link=https://wiki.nefald.fr/|color=codepen}}
| <code>codepen</code> || CodePen || Blanc (#ffffff) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=codepen}}
|-
|-
| <code>gitlab</code> || GitLab || Orange (#fc6f23) || {{ButtonLink|link=https://wiki.nefald.fr/|color=gitlab}}
| <code>gitlab</code> || GitLab || Orange (#fc6f23) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=gitlab}}
|-
|-
| <code>github</code> || GitHub || Sombre (#24292e) || {{ButtonLink|link=https://wiki.nefald.fr/|color=github}}
| <code>github</code> || GitHub || Sombre (#24292e) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=github}}
|}
|}


Ligne 110 : Ligne 118 :
! Code !! Plateforme !! Couleur !! Exemple
! Code !! Plateforme !! Couleur !! Exemple
|-
|-
| <code>buymeacoffee</code> || Buy Me a Coffee || Jaune (#ffdd00) || {{ButtonLink|link=https://wiki.nefald.fr/|color=buymeacoffee}}
| <code>buymeacoffee</code> || Buy Me a Coffee || Jaune (#ffdd00) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=buymeacoffee}}
|-
|-
| <code>helloasso</code> || HelloAsso || Violet (#4C40CF) || {{ButtonLink|link=https://wiki.nefald.fr/|color=helloasso}}
| <code>helloasso</code> || HelloAsso || Violet (#4C40CF) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=helloasso}}
|-
|-
| <code>kofi</code> || Ko-fi || Rouge (#ff5e5b) || {{ButtonLink|link=https://wiki.nefald.fr/|color=kofi}}
| <code>kofi</code> || Ko-fi || Rouge (#ff5e5b) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=kofi}}
|-
|-
| <code>liberapay</code> || Liberapay || Jaune (#f6c915) || {{ButtonLink|link=https://wiki.nefald.fr/|color=liberapay}}
| <code>liberapay</code> || Liberapay || Jaune (#f6c915) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=liberapay}}
|-
|-
| <code>opencollective</code> || Open Collective || Bleu (#7fadf2) || {{ButtonLink|link=https://wiki.nefald.fr/|color=opencollective}}
| <code>opencollective</code> || Open Collective || Bleu (#7fadf2) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=opencollective}}
|-
|-
| <code>patreon</code> || Patreon || Rouge (#ff424d) || {{ButtonLink|link=https://wiki.nefald.fr/|color=patreon}}
| <code>patreon</code> || Patreon || Rouge (#ff424d) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=patreon}}
|-
|-
| <code>stripe</code> || Stripe || Violet (#635BFF) || {{ButtonLink|link=https://wiki.nefald.fr/|color=stripe}}
| <code>stripe</code> || Stripe || Violet (#635BFF) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=stripe}}
|}
|}


Ligne 130 : Ligne 138 :
! Code !! Plateforme !! Couleur !! Exemple
! Code !! Plateforme !! Couleur !! Exemple
|-
|-
| <code>modrinth</code> || Modrinth || Vert (#1bd96a) || {{ButtonLink|link=https://wiki.nefald.fr/|color=modrinth}}
| <code>modrinth</code> || Modrinth || Vert (#1bd96a) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=modrinth}}
|-
|-
| <code>curseforge</code> || CurseForge || Orange (#f16436) || {{ButtonLink|link=https://wiki.nefald.fr/|color=curseforge}}
| <code>curseforge</code> || CurseForge || Orange (#f16436) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=curseforge}}
|-
|-
| <code>hangar</code> || Hangar || Bleu (#0d6efd) || {{ButtonLink|link=https://wiki.nefald.fr/|color=hangar}}
| <code>hangar</code> || Hangar || Bleu (#0d6efd) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=hangar}}
|-
|-
| <code>spigotmc</code> / <code>spigot</code> || SpigotMC || Jaune (#f7c03e) || {{ButtonLink|link=https://wiki.nefald.fr/|color=spigot}}
| <code>spigotmc</code> / <code>spigot</code> || SpigotMC || Jaune (#f7c03e) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=spigot}}
|-
|-
| <code>bukkit</code> || Bukkit || Orange (#f89a1e) || {{ButtonLink|link=https://wiki.nefald.fr/|color=bukkit}}
| <code>bukkit</code> || Bukkit || Orange (#f89a1e) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=bukkit}}
|-
|-
| <code>paper</code> / <code>paper</code> || PaperMC || Bleu (#1a8cff) || {{ButtonLink|link=https://wiki.nefald.fr/|color=paper}}
| <code>paper</code> || PaperMC || Bleu (#1a8cff) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=paper}}
|-
|-
| <code>purpur</code> || Purpur || Violet (#a855f7) || {{ButtonLink|link=https://wiki.nefald.fr/|color=purpur}}
| <code>purpur</code> || Purpur || Violet (#a855f7) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=purpur}}
|-
|-
| <code>polymart</code> || Polymart || Rose (#ec4899) || {{ButtonLink|link=https://wiki.nefald.fr/|color=polymart}}
| <code>polymart</code> || Polymart || Rose (#ec4899) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=polymart}}
|-
|-
| <code>github-releases</code> || GitHub Releases || Vert (#238636) || {{ButtonLink|link=https://wiki.nefald.fr/|color=github-releases}}
| <code>github-releases</code> || GitHub Releases || Vert (#238636) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=github-releases}}
|-
|-
| <code>jenkins</code> || Jenkins || Rouge (#d24939) || {{ButtonLink|link=https://wiki.nefald.fr/|color=jenkins}}
| <code>jenkins</code> || Jenkins || Rouge (#d24939) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=jenkins}}
|-
|-
| <code>maven</code> || Maven || Rouge (#c71a36) || {{ButtonLink|link=https://wiki.nefald.fr/|color=maven}}
| <code>maven</code> || Maven || Rouge (#c71a36) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=maven}}
|}
|}


Ligne 158 : Ligne 166 :
! Code !! Plateforme !! Couleur !! Exemple
! Code !! Plateforme !! Couleur !! Exemple
|-
|-
| <code>minecraft</code> || Minecraft || Vert (#62b47a) || {{ButtonLink|link=https://wiki.nefald.fr/|color=minecraft}}
| <code>minecraft</code> || Minecraft || Vert (#62b47a) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=minecraft}}
|-
|-
| <code>forge</code> || Forge || Bleu foncé (#1e2c42) || {{ButtonLink|link=https://wiki.nefald.fr/|color=forge}}
| <code>forge</code> || Forge || Bleu foncé (#1e2c42) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=forge}}
|-
|-
| <code>fabric</code> || Fabric || Beige (#dbd3c8) || {{ButtonLink|link=https://wiki.nefald.fr/|color=fabric}}
| <code>fabric</code> || Fabric || Beige (#dbd3c8) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=fabric}}
|-
|-
| <code>quilt</code> || Quilt || Violet (#8b5cf6) || {{ButtonLink|link=https://wiki.nefald.fr/|color=quilt}}
| <code>quilt</code> || Quilt || Violet (#8b5cf6) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=quilt}}
|-
|-
| <code>neoforge</code> || NeoForge || Orange (#ff6b35) || {{ButtonLink|link=https://wiki.nefald.fr/|color=neoforge}}
| <code>neoforge</code> || NeoForge || Orange (#ff6b35) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=neoforge}}
|}
|}


Ligne 174 : Ligne 182 :
! Code !! Plateforme !! Couleur !! Exemple
! Code !! Plateforme !! Couleur !! Exemple
|-
|-
| <code>velocity</code> || Velocity || Bleu (#3fa9f5) || {{ButtonLink|link=https://wiki.nefald.fr/|color=velocity}}
| <code>velocity</code> || Velocity || Bleu (#3fa9f5) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=velocity}}
|-
|-
| <code>waterfall</code> || Waterfall || Bleu (#0088ff) || {{ButtonLink|link=https://wiki.nefald.fr/|color=waterfall}}
| <code>waterfall</code> || Waterfall || Bleu (#0088ff) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=waterfall}}
|-
|-
| <code>bungeecord</code> || BungeeCord || Jaune (#ffcc00) || {{ButtonLink|link=https://wiki.nefald.fr/|color=bungeecord}}
| <code>bungeecord</code> || BungeeCord || Jaune (#ffcc00) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=bungeecord}}
|-
|-
| <code>sponge</code> || Sponge || Jaune (#f7cf0d) || {{ButtonLink|link=https://wiki.nefald.fr/|color=sponge}}
| <code>sponge</code> || Sponge || Jaune (#f7cf0d) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=sponge}}
|}
|}


Ligne 188 : Ligne 196 :
! Code !! Plateforme !! Couleur !! Exemple
! Code !! Plateforme !! Couleur !! Exemple
|-
|-
| <code>ftb</code> / <code>feed-the-beast</code> || Feed The Beast || Violet (#8e44ad) || {{ButtonLink|link=https://wiki.nefald.fr/|color=ftb}}
| <code>ftb</code> / <code>feed-the-beast</code> || Feed The Beast || Violet (#8e44ad) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=ftb}}
|-
|-
| <code>technic</code> || Technic Pack || Rouge (#e74c3c) || {{ButtonLink|link=https://wiki.nefald.fr/|color=technic}}
| <code>technic</code> || Technic Pack || Rouge (#e74c3c) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=technic}}
|-
|-
| <code>atlauncher</code> || ATLauncher || Bleu (#3498db) || {{ButtonLink|link=https://wiki.nefald.fr/|color=atlauncher}}
| <code>atlauncher</code> || ATLauncher || Bleu (#3498db) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=atlauncher}}
|}
|}


Ligne 233 : Ligne 241 :
== Exemples ==
== Exemples ==


=== Usage basique ===
=== Usage basique (avec preset) ===


<pre>
<pre>
{{ButtonLink
{{ButtonLink
|link = https://nfald.fr/discord
|link = https://nfald.fr/discord
|text = Rejoignez notre communauté
|text = Rejoignez notre Discord
|color = discord
|logo = discord
}}
}}
</pre>
</pre>


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


Ligne 253 : Ligne 261 :
<pre>
<pre>
{{ButtonLink
{{ButtonLink
|link = https://github.com/nefald
|link = https://github.com/nefald
|color = github
|logo = github
}}
</pre>
 
{{ButtonLink
|link = https://github.com/nefald
|logo = github
}}
 
=== Image à gauche du texte ===
 
<pre>
{{ButtonLink
|link    = https://www.helloasso.com/associations/nefald
|text    = Faire un don
|logo    = helloasso
|position = left
}}
}}
</pre>
</pre>


{{ButtonLink
{{ButtonLink
|link = https://github.com/nefald
|link     = https://www.helloasso.com/associations/nefald
|color = github
|text    = Faire un don
|logo    = helloasso
|position = left
}}
}}


=== Couleur personnalisée ===
=== QR Code avec fond blanc ===


<pre>
<pre>
{{ButtonLink
{{ButtonLink
|link = https://exemple.fr
|link             = https://www.helloasso.com/associations/nefald
|image = Custom-Logo.svg
|text            = Scanner pour donner
|text  = Bouton personnalisé
|image           = QRCode-HelloAsso.png
|bg    = linear-gradient(135deg, #667eea 0%, #764ba2 100%)
|logo            = helloasso
|image-background = #FFFFFF
|position        = left
}}
}}
</pre>
</pre>


=== Couleur et image personnalisées ===


<pre>
{{ButtonLink
|link      = https://exemple.fr
|image      = Custom-Logo.svg
|text      = Bouton personnalisé
|background = linear-gradient(135deg, #667eea 0%, #764ba2 100%)
}}
</pre>
=== Bouton centré sur la page ===
<pre>
{{ButtonLink
|link  = https://nfald.fr/discord
|text  = Rejoindre
|logo  = discord
|align = center
}}
</pre>


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


* Utilise [[mw:Extension:TemplateStyles|TemplateStyles]] pour un CSS isolé
* Utilise [[mw:Extension:TemplateStyles|TemplateStyles]] pour un CSS isolé
* Le lien est cliquable sur **toute la surface du bouton** (zone invisible en position absolue)
* Entièrement responsive (adapté mobile)
* Entièrement responsive (adapté mobile)
* Accessible (supporte les attributs alt et title)
* Accessible (supporte les attributs alt)
* Supporte les liens externes
* Supporte les liens externes et internes
* Les icônes de lien externe MediaWiki sont automatiquement masquées
* Centrage vertical parfait de l'image et du texte (flexbox)
* Aucun JavaScript requis
* Aucun JavaScript requis
* Compatible tous navigateurs modernes
* Compatible tous navigateurs modernes
* Les icônes de lien externe sont automatiquement masquées


== Voir aussi ==
== Voir aussi ==
Les témoins (''cookies'') nous aident à fournir nos services. En utilisant nos services, vous acceptez notre utilisation de témoins.