Basculer la recherche
Basculer le menu
63
1,9 k
13
5,7 k
Nefald
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
Autres actions
Navigation interactive dans l’historique
← Modification précédente
VisuelWikicode
Hiob (discussion | contributions)
owner
4 083 modifications
Aucun résumé des modifications
Balise : Révoqué
Hiob (discussion | contributions)
owner
4 083 modifications
 
(11 versions intermédiaires par 2 utilisateurs non affichées)
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.). Le lien est cliquable sur toute la surface du bouton.
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 ===
=== Syntaxe ===


<syntaxhighlight lang="mediawiki">
<syntaxhighlight lang="mediawiki">
{{ButtonLink
{{Button
|link             = URL du lien
|link       = URL du lien
|text              = Texte affiché (optionnel)
|style      = Style prédéfini (logo, couleur ou surface)
|logo             = Nom du preset (couleur + logo par défaut)
|image       = Nom du fichier image personnalisé (optionnel)
|image             = Nom du fichier image personnalisé (remplace le logo du preset)
|text        = Texte affiché (optionnel)
|position          = Position de l'image : center (défaut), left, right
|align       = Alignement du bouton : left, right, center
|align             = Alignement du bouton sur la page : left, center, right
|background = Couleur d'arrière-plan personnalisée (optionnel)
|size              = Taille de l'image (défaut : x80px)
|size        = Taille de l'image (défaut : x40px)
|background       = Couleur d'arrière-plan personnalisée (remplace la couleur du preset)
|height      = Hauteur du bouton (ex : 30px, 56px) (optionnel)
|image-background  = Couleur de fond de l'image (utile pour QR codes)
|title      = Texte du titre au survol (défaut : valeur de text)
|noimage          = oui pour masquer l'image
|alt         = Texte alternatif (défaut : valeur de text)
|alt               = Texte alternatif (défaut : valeur de text)
}}
}}
</syntaxhighlight>
</syntaxhighlight>
Ligne 28 : Ligne 27 :
| '''link''' || URL complète ou relative || Oui || -
| '''link''' || URL complète ou relative || Oui || -
|-
|-
| '''text''' || Texte affiché dans le bouton || Non || (vide)
| '''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)
|-
|-
| '''logo''' || Nom du preset prédéfini (ex : "discord", "github", "helloasso") || Non || gray
| '''image''' || Nom du fichier image personnalisé (ex : "MonLogo.svg"). Si '''style''' est utilisé, le logo correspondant est automatiquement chargé. || Non || -
|-
|-
| '''image''' || Nom du fichier image personnalisé (ex : "Custom-Logo.svg") || Non || Logo du preset ou ButtonLink-gray.svg
| '''text''' || Texte affiché sur le bouton || Non || (vide)
|-
|-
| '''position''' || Position de l'image : "center" (au-dessus), "left" (à gauche), "right" (à droite) || Non || center
| '''align''' || Alignement du bouton sur la page : <code>left</code>, <code>center</code>, <code>right</code> || Non || (pleine largeur)
|-
|-
| '''align''' || Alignement du bouton sur la page : "left", "center", "right" || Non || (vide)
| '''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 || x80px
| '''size''' || Taille de l'image (format MediaWiki) || Non || x40px
|-
|-
| '''background''' || Couleur d'arrière-plan personnalisée (hex, rgb, gradient) || Non || (utilise la couleur du preset)
| '''height''' || Hauteur du bouton (ex : <code>30px</code>, <code>56px</code>). Utile pour les boutons sans logo. || Non || 80px
|-
|-
| '''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 51 : Ligne 48 :
{{Bandeau|type=astuce
{{Bandeau|type=astuce
|
|
* Le paramètre '''logo''' définit automatiquement la couleur du bouton ET l'image par défaut
* **Sans paramètre `style=`** : Le bouton utilise la couleur bleue progressive du thème Citizen (<code>--background-color-progressive</code>).
* '''image''' permet de remplacer le logo par défaut tout en gardant la couleur du preset
* **Avec `style=surface-1` à `surface-4`** : Le bouton s'adapte automatiquement aux surfaces du thème Citizen (clair/sombre).
* '''background''' remplace complètement la couleur du preset
* **Avec `style=discord`, `style=github`, etc.** : Le logo correspondant est chargé automatiquement et la couleur de marque est appliquée.
* '''image-background''' ajoute un fond blanc/coloré derrière l'image (idéal pour QR codes)
* **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.
}}
}}


== Presets disponibles (logo=) ==
== 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 ==


=== Réseaux sociaux ===
=== Réseaux sociaux ===
Ligne 64 : Ligne 89 :
! Code !! Plateforme !! Couleur !! Exemple
! Code !! Plateforme !! Couleur !! Exemple
|-
|-
| <code>discord</code> || Discord || Violet (#5865f2) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=discord}}
| <code>discord</code> || Discord || violet (#5865f2) || {{Button|link=https://wiki.nefald.fr/|style= discord}}
|-
|-
| <code>twitter</code> || Twitter/X || Bleu (#1da1f2) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=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/|logo=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/|logo=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/|logo=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/|logo=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/|logo=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/|logo=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/|logo=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/|logo=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/|logo=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/|logo=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/|logo=threads}}
| <code>threads</code> || Threads || Noir (#000000) || {{Button|link=https://wiki.nefald.fr/|style= threads}}
|}
|}


Ligne 96 : Ligne 121 :
! Code !! Plateforme !! Couleur !! Exemple
! Code !! Plateforme !! Couleur !! Exemple
|-
|-
| <code>stackoverflow</code> || Stack Overflow || Noir (#252627) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=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/|logo=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/|logo=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/|logo=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/|logo=kubernetes}}
| <code>kubernetes</code> || Kubernetes || Bleu (#326ce5) || {{Button|link=https://wiki.nefald.fr/|style= kubernetes}}
|-
|-
| <code>codepen</code> || CodePen || Blanc (#ffffff) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=codepen}}
| <code>codepen</code> || CodePen || Blanc (#ffffff) || {{Button|link=https://wiki.nefald.fr/|style= codepen}}
|-
|-
| <code>gitlab</code> || GitLab || Orange (#fc6f23) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=gitlab}}
| <code>gitlab</code> || GitLab || Orange (#fc6f23) || {{Button|link=https://wiki.nefald.fr/|style= gitlab}}
|-
|-
| <code>github</code> || GitHub || Sombre (#24292e) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=github}}
| <code>github</code> || GitHub || Sombre (#24292e) || {{Button|link=https://wiki.nefald.fr/|style= github}}
|}
|}


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


Ligne 138 : Ligne 163 :
! Code !! Plateforme !! Couleur !! Exemple
! Code !! Plateforme !! Couleur !! Exemple
|-
|-
| <code>modrinth</code> || Modrinth || Vert (#1bd96a) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=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/|logo=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/|logo=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/|logo=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/|logo=bukkit}}
| <code>bukkit</code> || Bukkit || Orange (#f89a1e) || {{Button|link=https://wiki.nefald.fr/|style= bukkit}}
|-
|-
| <code>paper</code> || PaperMC || Bleu (#1a8cff) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=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/|logo=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/|logo=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/|logo=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/|logo=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/|logo=maven}}
| <code>maven</code> || Maven || Rouge (#c71a36) || {{Button|link=https://wiki.nefald.fr/|style= maven}}
|}
|}


Ligne 166 : Ligne 191 :
! Code !! Plateforme !! Couleur !! Exemple
! Code !! Plateforme !! Couleur !! Exemple
|-
|-
| <code>minecraft</code> || Minecraft || Vert (#62b47a) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=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/|logo=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/|logo=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/|logo=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/|logo=neoforge}}
| <code>neoforge</code> || NeoForge || Orange (#ff6b35) || {{Button|link=https://wiki.nefald.fr/|style= neoforge}}
|}
|}


Ligne 182 : Ligne 207 :
! Code !! Plateforme !! Couleur !! Exemple
! Code !! Plateforme !! Couleur !! Exemple
|-
|-
| <code>velocity</code> || Velocity || Bleu (#3fa9f5) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=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/|logo=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/|logo=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/|logo=sponge}}
| <code>sponge</code> || Sponge || Jaune (#f7cf0d) || {{Button|link=https://wiki.nefald.fr/|style= sponge}}
|}
|}


Ligne 196 : 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/|logo=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/|logo=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/|logo=atlauncher}}
| <code>atlauncher</code> || ATLauncher || Bleu (#3498db) || {{Button|link=https://wiki.nefald.fr/|style= atlauncher}}
|}
|}


Ligne 241 : Ligne 266 :
== Exemples ==
== Exemples ==


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


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


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


Ligne 260 : Ligne 285 :


<pre>
<pre>
{{ButtonLink
{{Button
|link = https://github.com/nefald
|link = https://github.com/nefald
|logo = github
|style = github
}}
}}
</pre>
</pre>


{{ButtonLink
{{Button
|link = https://github.com/nefald
|link = https://github.com/nefald
|logo = github
|style = github
}}
}}


=== Image à gauche du texte ===
=== Couleur personnalisée ===


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


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


=== QR Code avec fond blanc ===
<pre>
{{ButtonLink
|link            = https://www.helloasso.com/associations/nefald
|text            = Scanner pour donner
|image            = QRCode-HelloAsso.png
|logo            = helloasso
|image-background = #FFFFFF
|position        = left
}}
</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 328 : 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
|text = Téléverser un fichier
|image = Upload-Icon.svg
|logo = primary
|text = Téléverser un fichier
|style = primary
}}
}}
{{ButtonLink
{{Button
|link = /wiki/Spécial:Modifications_récentes
|link = /wiki/Spécial:Modifications_récentes
|text = Modifications récentes
|image = Recent-Changes-Icon.svg
|logo = info
|text = Modifications récentes
|style = info
}}
}}
{{ButtonLink
{{Button
|link = /wiki/Spécial:Pages_demandées
|link = /wiki/Spécial:Pages_demandées
|text = Pages demandées
|image = Wanted-Pages-Icon.svg
|logo = warning
|text = Pages demandées
|style = warning
}}
}}
</div>
</div>
Ligne 349 : Ligne 337 :


* 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)
* Accessible (supporte les attributs alt et title)
* Supporte les liens externes et internes
* Supporte les liens externes
* 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 ==


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


<noinclude>[[Catégorie:Documentation de modèle]]</noinclude>
<noinclude>[[Catégorie:Documentation de modèle]]</noinclude>
Récupérée de "https://wiki.nefald.fr/Modèle:Button/doc"
Les témoins (''cookies'') nous aident à fournir nos services. En utilisant nos services, vous acceptez notre utilisation de témoins.