Button

Description
This creates a button consistent with Fandom Design System.
Dependencies

テンプレート:CSS Install

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
{{button|<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
{{button|Main Page}}

gives Main Page

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

gives Fandom

{{button|text=Disabled}}

gives Disabled


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

gives Main Page

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

gives Main Page

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

gives Main Page

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

gives Main Page

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

gives Main Page

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

gives Disabled

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

gives Main Page

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

gives Main Page

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

gives Main Page

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

gives Main Page

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

gives Main Page

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

gives Disabled

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

gives Main Page

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

gives Disabled

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

gives Main Page

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

gives Disabled

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

gives Main Page

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

gives Disabled

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

gives Main Page

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

gives Main Page

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

gives Main Page

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

gives Main Page

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

gives Main Page

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

gives Disabled

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

gives Main Page

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

gives Disabled

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

gives Main Page

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

gives Disabled

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

gives Main Page

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

gives Disabled

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

gives Main Page

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

gives Disabled

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

gives Main Page

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

gives Disabled

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

gives Main Page

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

gives Disabled


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

gives Main Page

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

gives Main Page

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

gives Main Page

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

gives Disabled


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

gives Main Page

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

gives Main Page

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

gives Main Page

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

gives Disabled

Jade buttons
{{button|Main Page|link=Main Page|class=wds-is-discord-color}}

gives Main Page

{{button|text=Disabled|class=wds-is-discord-color}}

gives Disabled

Customized
{{button|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
特に記載のない限り、コミュニティのコンテンツはCC-BY-SAライセンスの下で利用可能です。