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)
Balises : Modification par mobile Modification par le web mobile
Hiob (discussion | contributions)
m exemple couleur par défaut
 
(20 versions intermédiaires par 2 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
== Utilisation ==
== Utilisation ==


Ligne 7 : Ligne 6 :


<syntaxhighlight lang="mediawiki">
<syntaxhighlight lang="mediawiki">
{{ButtonLink
{{Button
|link       = URL du lien
|link       = URL du lien
|image     = Nom du fichier image (avec extension)
|style      = Style prédéfini (logo, couleur ou surface)
|text       = Texte affiché (optionnel)
|image       = Nom du fichier image personnalisé (optionnel)
|color      = Nom de couleur prédéfinie (optionnel)
|text       = Texte affiché (optionnel)
|bg        = Couleur d'arrière-plan personnalisée (optionnel, remplace color)
|align      = Alignement du bouton : left, right, center
|size       = Taille de l'image (défaut : x40px)
|background  = Couleur d'arrière-plan personnalisée (optionnel)
|title     = Texte du titre au survol (défaut : valeur de text)
|size       = Taille de l'image (défaut : x40px)
|alt       = Texte alternatif (défaut : valeur de text)
|height      = Hauteur du bouton (ex : 30px, 56px) (optionnel)
|title       = Texte du titre au survol (défaut : valeur de text)
|alt         = Texte alternatif (défaut : valeur de text)
}}
}}
</syntaxhighlight>
</syntaxhighlight>
Ligne 21 : Ligne 22 :
=== Paramètres ===
=== Paramètres ===


{| class="wikitable"
{| class="wikitable sortable"
! Paramètre !! Description !! Requis !! Défaut
! Paramètre !! Description !! Requis !! Défaut
|-
|-
| '''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 || -
| '''style''' || Style prédéfini : nom de logo (ex : <code>discord</code>), surface (<code>surface-1</code> à <code>surface-4</code>), ou couleur générique (<code>danger</code>, <code>success</code>, etc.) || Non || (bleu progressif par défaut)
|-
| '''image''' || Nom du fichier image personnalisé (ex : "MonLogo.svg"). Si '''style''' est utilisé, le logo correspondant est automatiquement chargé. || Non || -
|-
|-
| '''text''' || Texte affiché sous le logo || Non || (vide)
| '''text''' || Texte affiché sur le bouton || Non || (vide)
|-
|-
| '''color''' || Nom de couleur prédéfinie (voir liste ci-dessous) || Non || gray
| '''align''' || Alignement du bouton sur la page : <code>left</code>, <code>center</code>, <code>right</code> || Non || (pleine largeur)
|-
|-
| '''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, nom CSS). Remplace le style prédéfini. || Non || (utilise '''style''' ou défaut)
|-
|-
| '''size''' || Taille de l'image (format MediaWiki) || Non || x40px
| '''size''' || Taille de l'image (format MediaWiki) || Non || x40px
|-
| '''height''' || Hauteur du bouton (ex : <code>30px</code>, <code>56px</code>). Utile pour les boutons sans logo. || Non || 80px
|-
|-
| '''title''' || Texte du titre HTML (infobulle au survol) || Non || valeur de '''text'''
| '''title''' || Texte du titre HTML (infobulle au survol) || Non || valeur de '''text'''
Ligne 41 : Ligne 46 :
|}
|}


'''Note :''' Si '''color''' et '''bg''' sont tous deux spécifiés, '''bg''' est prioritaire.
{{Bandeau|type=astuce
|
* **Sans paramètre `style=`** : Le bouton utilise la couleur bleue progressive du thème Citizen (<code>--background-color-progressive</code>).
* **Avec `style=surface-1` à `surface-4`** : Le bouton s'adapte automatiquement aux surfaces du thème Citizen (clair/sombre).
* **Avec `style=discord`, `style=github`, etc.** : Le logo correspondant est chargé automatiquement et la couleur de marque est appliquée.
* **Avec `background=#FF0000`** : Une couleur personnalisée remplace le style prédéfini.
* Le paramètre '''height''' est particulièrement utile pour des boutons '''sans logo''' (texte seul) afin de réduire la hauteur.
}}
 
== Styles prédéfinis ==
=== Couleur par défaut ===
 
{| class="wikitable"
! Style !! Description !! Exemple
|-
|  || Couleur par défaut || {{Button|link=https://wiki.nefald.fr|text=Couleur par défaut}}
|}
 
=== Surfaces adaptatives (s'adaptent au thème clair/sombre) ===
 
{| class="wikitable"
! Style !! Description !! Exemple
|-
| <code>surface-0</code> || Surface de niveau 0 (la plus claire en mode clair, la plus foncée en mode sombre) || {{Button|link=https://wiki.nefald.fr|style=surface-0|text=Surface 0}}
|-
| <code>surface-1</code> || Surface de niveau 1 || {{Button|link=https://wiki.nefald.fr|style=surface-1|text=Surface 1}}
|-
| <code>surface-2</code> || Surface de niveau 2 || {{Button|link=https://wiki.nefald.fr|style=surface-2|text=Surface 2}}
|-
| <code>surface-3</code> || Surface de niveau 3 || {{Button|link=https://wiki.nefald.fr|style=surface-3|text=Surface 3}}
|-
| <code>surface-4</code> || Surface de niveau 4 (la plus foncée en mode clair, la plus claire en mode sombre) || {{Button|link=https://wiki.nefald.fr|style=surface-4|text=Surface 4}}
|}
 
{{Bandeau|type=info|Les surfaces utilisent les variables CSS du thème Citizen (<code>--color-surface-X</code>) et s'adaptent automatiquement au mode clair/sombre.}}


== Couleurs prédéfinies ==
== Couleurs prédéfinies ==
Ligne 50 : Ligne 89 :
! Code !! Plateforme !! Couleur !! Exemple
! Code !! Plateforme !! Couleur !! Exemple
|-
|-
| <code>discord</code> || Discord || Blurple (#5865f2) || <code>{{ButtonLink|link=https://wiki.nefald.fr/|color=discord}}
| <code>discord</code> || Discord || violet (#5865f2) || {{Button|link=https://wiki.nefald.fr/|style= discord}}
|-
| <code>patreon</code> || Patreon || Rouge (#ff424d) || {{ButtonLink|link=https://wiki.nefald.fr/|color=patreon}}
|-
| <code>gitlab</code> || GitLab || Orange (#fc6f23) || {{ButtonLink|link=https://wiki.nefald.fr/|color=gitlab}}
|-
| <code>github</code> || GitHub || Sombre (#24292e) || {{ButtonLink|link=https://wiki.nefald.fr/|color=github}}
|-
|-
| <code>twitter</code> || Twitter/X || Bleu (#1da1f2) || {{ButtonLink|link=https://wiki.nefald.fr/|color=twitter}}
| <code>twitter</code> || Twitter/X || Bleu (#1da1f2) || {{Button|link=https://wiki.nefald.fr/|style= twitter}}
|-
|-
| <code>youtube</code> || YouTube || Rouge (#ff0000) || {{ButtonLink|link=https://wiki.nefald.fr/|color=youtube}}
| <code>youtube</code> || YouTube || Rouge (#ff0000) || {{Button|link=https://wiki.nefald.fr/|style= youtube}}
|-
|-
| <code>twitch</code> || Twitch || Violet (#9146ff) || {{ButtonLink|link=https://wiki.nefald.fr/|color=twitch}}
| <code>twitch</code> || Twitch || Violet (#9146ff) || {{Button|link=https://wiki.nefald.fr/|style= twitch}}
|-
|-
| <code>reddit</code> || Reddit || Orange (#ff4500) || {{ButtonLink|link=https://wiki.nefald.fr/|color=reddit}}
| <code>reddit</code> || Reddit || Orange (#ff4500) || {{Button|link=https://wiki.nefald.fr/|style= reddit}}
|-
|-
| <code>mastodon</code> || Mastodon || Violet (#6364ff) || {{ButtonLink|link=https://wiki.nefald.fr/|color=mastodon}}
| <code>mastodon</code> || Mastodon || Violet (#6364ff) || {{Button|link=https://wiki.nefald.fr/|style= mastodon}}
|-
|-
| <code>bluesky</code> || Bluesky || Bleu (#0085ff) || {{ButtonLink|link=https://wiki.nefald.fr/|color=bluesky}}
| <code>bluesky</code> || Bluesky || Bleu (#0085ff) || {{Button|link=https://wiki.nefald.fr/|style= bluesky}}
|-
|-
| <code>linkedin</code> || LinkedIn || Bleu (#0077b5) || {{ButtonLink|link=https://wiki.nefald.fr/|color=linkedin}}
| <code>linkedin</code> || LinkedIn || Bleu (#0077b5) || {{Button|link=https://wiki.nefald.fr/|style= linkedin}}
|-
|-
| <code>facebook</code> || Facebook || Bleu (#1877f2) || {{ButtonLink|link=https://wiki.nefald.fr/|color=facebook}}
| <code>facebook</code> || Facebook || Bleu (#1877f2) || {{Button|link=https://wiki.nefald.fr/|style= facebook}}
|-
|-
| <code>instagram</code> || Instagram || Dégradé || {{ButtonLink|link=https://wiki.nefald.fr/|color=instagram}}
| <code>instagram</code> || Instagram || Dégradé || {{Button|link=https://wiki.nefald.fr/|style= instagram}}
|-
|-
| <code>tiktok</code> || TikTok || Noir (#000000) || {{ButtonLink|link=https://wiki.nefald.fr/|color=tiktok}}
| <code>tiktok</code> || TikTok || Noir (#000000) || {{Button|link=https://wiki.nefald.fr/|style= tiktok}}
|-
|-
| <code>snapchat</code> || Snapchat || Jaune (#fffc00) || {{ButtonLink|link=https://wiki.nefald.fr/|color=snapchat}}
| <code>snapchat</code> || Snapchat || Jaune (#fffc00) || {{Button|link=https://wiki.nefald.fr/|style= snapchat}}
|-
|-
| <code>threads</code> || Threads || Noir (#000000) || {{ButtonLink|link=https://wiki.nefald.fr/|color=threads}}
| <code>threads</code> || Threads || Noir (#000000) || {{Button|link=https://wiki.nefald.fr/|style= threads}}
|}
|}


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


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


Ligne 122 : Ligne 163 :
! 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) || {{Button|link=https://wiki.nefald.fr/|style= modrinth}}
|-
|-
| <code>curseforge</code> || CurseForge || Orange (#f16436) || {{ButtonLink|link=https://wiki.nefald.fr/|color=curseforge}}
| <code>curseforge</code> || CurseForge || Orange (#f16436) || {{Button|link=https://wiki.nefald.fr/|style= curseforge}}
|-
|-
| <code>hangar</code> || Hangar || Bleu (#0d6efd) || {{ButtonLink|link=https://wiki.nefald.fr/|color=hangar}}
| <code>hangar</code> || Hangar || Bleu (#0d6efd) || {{Button|link=https://wiki.nefald.fr/|style= 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) || {{Button|link=https://wiki.nefald.fr/|style= spigot}}
|-
|-
| <code>bukkit</code> || Bukkit || Orange (#f89a1e) || {{ButtonLink|link=https://wiki.nefald.fr/|color=bukkit}}
| <code>bukkit</code> || Bukkit || Orange (#f89a1e) || {{Button|link=https://wiki.nefald.fr/|style= bukkit}}
|-
|-
| <code>papermc</code> / <code>paper</code> || PaperMC || Bleu (#1a8cff) || {{ButtonLink|link=https://wiki.nefald.fr/|color=paper}}
| <code>paper</code> / <code>paper</code> || PaperMC || Bleu (#1a8cff) || {{Button|link=https://wiki.nefald.fr/|style= paper}}
|-
|-
| <code>purpur</code> || Purpur || Violet (#a855f7) || {{ButtonLink|link=https://wiki.nefald.fr/|color=purpur}}
| <code>purpur</code> || Purpur || Violet (#a855f7) || {{Button|link=https://wiki.nefald.fr/|style= purpur}}
|-
|-
| <code>polymart</code> || Polymart || Rose (#ec4899) || {{ButtonLink|link=https://wiki.nefald.fr/|color=polymart}}
| <code>polymart</code> || Polymart || Rose (#ec4899) || {{Button|link=https://wiki.nefald.fr/|style= 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) || {{Button|link=https://wiki.nefald.fr/|style= github-releases}}
|-
|-
| <code>jenkins</code> || Jenkins || Rouge (#d24939) || {{ButtonLink|link=https://wiki.nefald.fr/|color=jenkins}}
| <code>jenkins</code> || Jenkins || Rouge (#d24939) || {{Button|link=https://wiki.nefald.fr/|style= jenkins}}
|-
|-
| <code>maven</code> || Maven || Rouge (#c71a36) || {{ButtonLink|link=https://wiki.nefald.fr/|color=maven}}
| <code>maven</code> || Maven || Rouge (#c71a36) || {{Button|link=https://wiki.nefald.fr/|style= maven}}
|}
|}


Ligne 150 : Ligne 191 :
! 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) || {{Button|link=https://wiki.nefald.fr/|style= minecraft}}
|-
|-
| <code>forge</code> || Forge || Bleu foncé (#1e2c42) || {{ButtonLink|link=https://wiki.nefald.fr/|color=forge}}
| <code>forge</code> || Forge || Bleu foncé (#1e2c42) || {{Button|link=https://wiki.nefald.fr/|style= forge}}
|-
|-
| <code>fabric</code> || Fabric || Beige (#dbd3c8) || {{ButtonLink|link=https://wiki.nefald.fr/|color=fabric}}
| <code>fabric</code> || Fabric || Beige (#dbd3c8) || {{Button|link=https://wiki.nefald.fr/|style= fabric}}
|-
|-
| <code>quilt</code> || Quilt || Violet (#8b5cf6) || {{ButtonLink|link=https://wiki.nefald.fr/|color=quilt}}
| <code>quilt</code> || Quilt || Violet (#8b5cf6) || {{Button|link=https://wiki.nefald.fr/|style= quilt}}
|-
|-
| <code>neoforge</code> || NeoForge || Orange (#ff6b35) || {{ButtonLink|link=https://wiki.nefald.fr/|color=neoforge}}
| <code>neoforge</code> || NeoForge || Orange (#ff6b35) || {{Button|link=https://wiki.nefald.fr/|style= neoforge}}
|}
|}


Ligne 166 : Ligne 207 :
! 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) || {{Button|link=https://wiki.nefald.fr/|style= velocity}}
|-
|-
| <code>waterfall</code> || Waterfall || Bleu (#0088ff) || {{ButtonLink|link=https://wiki.nefald.fr/|color=waterfall}}
| <code>waterfall</code> || Waterfall || Bleu (#0088ff) || {{Button|link=https://wiki.nefald.fr/|style= waterfall}}
|-
|-
| <code>bungeecord</code> || BungeeCord || Jaune (#ffcc00) || {{ButtonLink|link=https://wiki.nefald.fr/|color=bungeecord}}
| <code>bungeecord</code> || BungeeCord || Jaune (#ffcc00) || {{Button|link=https://wiki.nefald.fr/|style= bungeecord}}
|-
|-
| <code>sponge</code> || Sponge || Jaune (#f7cf0d) || {{ButtonLink|link=https://wiki.nefald.fr/|color=sponge}}
| <code>sponge</code> || Sponge || Jaune (#f7cf0d) || {{Button|link=https://wiki.nefald.fr/|style= sponge}}
|}
|}


Ligne 180 : Ligne 221 :
! 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) || {{Button|link=https://wiki.nefald.fr/|style= ftb}}
|-
|-
| <code>technic</code> || Technic Pack || Rouge (#e74c3c) || {{ButtonLink|link=https://wiki.nefald.fr/|color=technic}}
| <code>technic</code> || Technic Pack || Rouge (#e74c3c) || {{Button|link=https://wiki.nefald.fr/|style= technic}}
|-
|-
| <code>atlauncher</code> || ATLauncher || Bleu (#3498db) || {{ButtonLink|link=https://wiki.nefald.fr/|color=atlauncher}}
| <code>atlauncher</code> || ATLauncher || Bleu (#3498db) || {{Button|link=https://wiki.nefald.fr/|style= atlauncher}}
|}
|}


Ligne 228 : Ligne 269 :


<pre>
<pre>
{{ButtonLink
{{Button
|link  = https://nfald.fr/discord
|link  = https://nfald.fr/discord
|image = Discord-Logo-White.svg
|text  = Rejoignez notre communauté
|text  = Rejoignez notre Discord
|style = discord
|color = discord
}}
}}
</pre>
</pre>


{{ButtonLink
{{Button
|link  = https://nfald.fr/discord
|link  = https://nfald.fr/discord
|image = Discord-Logo-White.svg
|text  = Rejoignez notre Discord
|text  = Rejoignez notre Discord
|color = discord
|style = discord
}}
}}


Ligne 246 : Ligne 285 :


<pre>
<pre>
{{ButtonLink
{{Button
|link  = https://github.com/nefald
|link  = https://github.com/nefald
|image = GitHub-Logo-White.svg
|style = github
|color = github
}}
}}
</pre>
</pre>


{{ButtonLink
{{Button
|link  = https://github.com/nefald
|link  = https://github.com/nefald
|image = GitHub-Logo-White.svg
|style = github
|color = github
}}
 
=== Lien interne ===
 
<pre>
{{ButtonLink
|link  = /wiki/Aide:Sommaire
|image = Help-Icon.svg
|text  = Centre d'aide
|color = primary
}}
</pre>
 
{{ButtonLink
|link  = /wiki/Aide:Sommaire
|image = Help-Icon.svg
|text  = Centre d'aide
|color = primary
}}
}}


Ligne 280 : Ligne 299 :


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


=== Grille de téléchargements multi-plateformes ===


<pre>
<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>
</pre>
<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 ===
<pre>
<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>
</pre>


=== Boutons d'actions ===
=== Boutons d'actions ===
Ligne 385 : Ligne 313 :
<pre>
<pre>
<div class="button-link-grid">
<div class="button-link-grid">
{{ButtonLink
{{Button
|link  = /wiki/Spécial:Téléverser
|link  = /wiki/Spécial:Téléverser
|image = Upload-Icon.svg
|image = Upload-Icon.svg
|text  = Téléverser un fichier
|text  = Téléverser un fichier
|color = primary
|style = primary
}}
}}
{{ButtonLink
{{Button
|link  = /wiki/Spécial:Modifications_récentes
|link  = /wiki/Spécial:Modifications_récentes
|image = Recent-Changes-Icon.svg
|image = Recent-Changes-Icon.svg
|text  = Modifications récentes
|text  = Modifications récentes
|color = info
|style = info
}}
}}
{{ButtonLink
{{Button
|link  = /wiki/Spécial:Pages_demandées
|link  = /wiki/Spécial:Pages_demandées
|image = Wanted-Pages-Icon.svg
|image = Wanted-Pages-Icon.svg
|text  = Pages demandées
|text  = Pages demandées
|color = warning
|style = warning
}}
}}
</div>
</div>
Ligne 411 : Ligne 339 :
* Entièrement responsive (adapté mobile)
* Entièrement responsive (adapté mobile)
* Accessible (supporte les attributs alt et title)
* Accessible (supporte les attributs alt et title)
* Supporte les liens externes et internes
* Supporte les liens externes
* Aucun JavaScript requis
* Aucun JavaScript requis
* Compatible tous navigateurs modernes
* Compatible tous navigateurs modernes
* Les icônes de lien externe sont automatiquement masquées
* Les icônes de lien externe sont automatiquement masquées
== Accessibilité ==
Le modèle est conçu pour être accessible :
* Utilisation d'attributs <code>alt</code> pour les images
* Attributs <code>title</code> pour les infobulles
* Contraste de couleur respectant les normes WCAG
* Navigation au clavier possible
* Compatible avec les lecteurs d'écran


== Voir aussi ==
== Voir aussi ==


* [[Modèle:Bouton]]
* [[Modèle:IconButton]]
* [[Modèle:Icône]]
* [[Modèle:Bandeau]]
* [[Modèle:Bandeau]]
* [[Modèle:Couleur]]
* [[Modèle:Couleur]]
* [[Aide:Modèles]]
* [[Aide:Modèles]]


<includeonly>[[Catégorie:Modèles de lien]][[Catégorie:Modèles de bouton]][[Catégorie:Modèles d'interface]]</includeonly>
<noinclude>[[Catégorie:Documentation de modèle]]</noinclude>
Les témoins (''cookies'') nous aident à fournir nos services. En utilisant nos services, vous acceptez notre utilisation de témoins.