FANDOM


Button

Export this template, then import, to install it.
Use edit summary: Copied from [[w:c:templates:Template:Wdsbutton]] to properly attribute this template's editors.
This template is probably not already on your wiki.
Template documentation
Note: the template above may sometimes be partially or fully invisible.

View or edit this documentation. (How does this work?)

Editors can experiment with this template's sandbox and test case pages.
Description
This creates a button consistent with Fandom Design System.
Dependencies
CSS (syntax)
.wds-button.<classname> {
    color: #fff;
    background: none;
}
.wds-button.<classname>:not(.wds-is-text):not(.wds-is-secondary) {
    background-color: <color 1a>;
}
.wds-button .<classname>:not(.wds-is-text):not(.wds-is-secondary):focus:not(:disabled),
.wds-button .<classname>:not(.wds-is-text):not(.wds-is-secondary):hover:not(:disabled),
.wds-button .<classname>:not(.wds-is-text):not(.wds-is-secondary):active,
.wds-button .<classname>:not(.wds-is-text):not(.wds-is-secondary).wds-is-active {
    background-color: <color 1b>;
    border-color: <color 1b>;
}
.wds-button.<classname>:not(.wds-is-text) {
    border-color: <color 1a>;
}
.wds-button.<classname>.wds-is-secondary{
    border-color: <color 2a>;
    color: <color 2a>;
}
.wds-button.<classname>.wds-is-secondary:focus:not(:disabled),
.wds-button.<classname>.wds-is-secondary:hover:not(:disabled),
.wds-button.<classname>.wds-is-secondary:active,
.wds-button.<classname>.wds-is-secondary.wds-is-active {
    border-color: <color 2b>;
    color: <color 2b>;
}
.wds-button.<classname>.wds-is-text{
    color: <color 2a>;
}
.wds-button.<classname>.wds-is-text:focus:not(:disabled),
.wds-button.<classname>.wds-is-text:hover:not(:disabled),
.wds-button.<classname>.wds-is-text:active,
.wds-button.<classname>.wds-is-text.wds-is-active{
    color: <color 2b>;
}
Syntax
{{wdsbutton|link or URL|text}}
There are several variables for customization.
  • text= <text shown in button>
  • link= <internal link redirected by the button>
  • elink= <external link redirected by the button, must start with http://>
  • tooltip= <hover text>
  • class= <class(es) of button>
  • style= <style of button>
Example
  • Normal example
{{wdsbutton|Main Page}}

gives Main Page

{{wdsbutton|https://www.fandom.com/|Fandom}}

gives Fandom

{{wdsbutton|text=Disabled}}

gives Disabled


  • Secondary button (on light backgrounds)
{{wdsbutton|Main Page|link=Main Page|class=wds-is-secondary}}

gives Main Page

  • Secondary button (on dark backgrounds)
{{wdsbutton|Main Page|link=Main Page|class=wds-is-secondary wds-is-light}}

gives Main Page

  • Text button (on light backgrounds)
{{wdsbutton|Main Page|link=Main Page|class=wds-is-text}}

gives Main Page

  • Text button (on dark backgrounds)
{{wdsbutton|Main Page|link=Main Page|class=wds-is-text wds-is-light}}

gives Main Page

Other examples
Fandom default buttons
{{wdsbutton|Main Page|link=Main Page|class=wds-is-fandom-color}}

gives Main Page

{{wdsbutton|Disabled|class=wds-is-fandom-color}}

gives Disabled

  • Secondary button (on light backgrounds)
{{wdsbutton|Main Page|link=Main Page|class=wds-is-fandom-color wds-is-secondary}}

gives Main Page

  • Secondary button (on dark backgrounds)
{{wdsbutton|Main Page|link=Main Page|class=wds-is-fandom-color wds-is-secondary wds-is-light}}

gives Main Page

  • Text button (on light backgrounds)
{{wdsbutton|Main Page|link=Main Page|class=wds-is-fandom-color wds-is-text}}

gives Main Page

  • Text button (on dark backgrounds)
{{wdsbutton|Main Page|link=Main Page|class=wds-is-fandom-color wds-is-text wds-is-light}}

gives Main Page

Oasis buttons
{{wdsbutton|Main Page|link=Main Page|class=wds-is-oasis-color}}

gives Main Page

{{wdsbutton|text=Disabled|class=wds-is-oasis-color}}

gives Disabled

Jade buttons
{{wdsbutton|Main Page|link=Main Page|class=wds-is-jade-color}}

gives Main Page

{{wdsbutton|text=Disabled|class=wds-is-jade-color}}

gives Disabled

Babygirl buttons
{{wdsbutton|Main Page|link=Main Page|class=wds-is-babygirl-color}}

gives Main Page

{{wdsbutton|text=Disabled|class=wds-is-babygirl-color}}

gives Disabled

Carbon buttons
{{wdsbutton|Main Page|link=Main Page|class=wds-is-carbon-color}}

gives Main Page

{{wdsbutton|text=Disabled|class=wds-is-carbon-color}}

gives Disabled

  • Secondary button (on light backgrounds)
{{wdsbutton|Main Page|link=Main Page|class=wds-is-carbon-color wds-is-secondary}}

gives Main Page

  • Secondary button (on dark backgrounds)
{{wdsbutton|Main Page|link=Main Page|class=wds-is-carbon-color wds-is-secondary wds-is-light}}

gives Main Page

  • Text button (on light backgrounds)
{{wdsbutton|Main Page|link=Main Page|class=wds-is-carbon-color wds-is-text}}

gives Main Page

  • Text button (on dark backgrounds)
{{wdsbutton|Main Page|link=Main Page|class=wds-is-carbon-color wds-is-text wds-is-light}}

gives Main Page

Rockgarden buttons
{{wdsbutton|Main Page|link=Main Page|class=wds-is-rockgarden-color}}

gives Main Page

{{wdsbutton|text=Disabled|class=wds-is-rockgarden-color}}

gives Disabled

Opulence buttons
{{wdsbutton|Main Page|link=Main Page|class=wds-is-opulence-color}}

gives Main Page

{{wdsbutton|text=Disabled|class=wds-is-opulence-color}}

gives Disabled

Bluesteel buttons
{{wdsbutton|Main Page|link=Main Page|class=wds-is-bluesteel-color}}

gives Main Page

{{wdsbutton|text=Disabled|class=wds-is-bluesteel-color}}

gives Disabled

Creamsicle buttons
{{wdsbutton|Main Page|link=Main Page|class=wds-is-creamsicle-color}}

gives Main Page

{{wdsbutton|text=Disabled|class=wds-is-creamsicle-color}}

gives Disabled

Plated buttons
{{wdsbutton|Main Page|link=Main Page|class=wds-is-plated-color}}

gives Main Page

{{wdsbutton|text=Disabled|class=wds-is-plated-color}}

gives Disabled

Police buttons
{{wdsbutton|Main Page|link=Main Page|class=wds-is-police-color}}

gives Main Page

{{wdsbutton|text=Disabled|class=wds-is-police-color}}

gives Disabled

Aliencrate buttons
{{wdsbutton|Main Page|link=Main Page|class=wds-is-aliencrate-color}}

gives Main Page

{{wdsbutton|text=Disabled|class=wds-is-aliencrate-color}}

gives Disabled


Theming buttons
{{wdsbutton|Main Page|link=Main Page|class=primary-only}}

gives Main Page

{{wdsbutton|Main Page|link=Main Page|class=primary-only wds-is-secondary}}

gives Main Page

{{wdsbutton|Main Page|link=Main Page|class=primary-only wds-is-text}}

gives Main Page

{{wdsbutton|text=Disabled|class=primary-only}}

gives Disabled


{{wdsbutton|Main Page|link=Main Page|class=different-secondary}}

gives Main Page

{{wdsbutton|Main Page|link=Main Page|class=different-secondary wds-is-secondary}}

gives Main Page

{{wdsbutton|Main Page|link=Main Page|class=different-secondary wds-is-text}}

gives Main Page

{{wdsbutton|text=Disabled|class=different-secondary}}

gives Disabled

Customized
{{wdsbutton|https://discord.gg/fandom|Fandom Discord Server|style=background:#7289da; border:4px solid #7289da; color:#FFF; display:inline-block; font-weight:bold; font-family:rubik;}}

gives Fandom Discord Server

See also
Community content is available under CC-BY-SA unless otherwise noted.