Introduction[]
Buttons are a WikiText/Wikicode feature that allow you to make buttons. Their color depend on the Wiki's default color for buttons, with added attributes.
Regular Button[]
To make a default button, use class="wds-button".
Example:
Code:
<span class="wds-button">button</span>
Collapsible Button[]
Add class="wds-button mw-customtoggle-scripts", class="mw-collapsible mw-collapsed" and id="mw-customcollapsible-scripts" to make the button collapsible.
Example:
Code:
<span class="wds-button mw-customtoggle-scripts">Collapsible button</span> <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-scripts">This is a collapsible content</div>
Styling[]
To style a button, type style=" " and put whatever style you want in the quotation marks.
Example styling: style="border:solid black 2px;"
Example code:
<span class="wds-button" style="border:solid black 2px;">button</span>
Adding Borders[]
Code for a button with a solid black border:
<span class="wds-button" style="border:solid black 2px;">button</span>
You can also do this with a collapsible button:
Code:
<span class="wds-button mw-customtoggle-scripts" style="border:solid black 2px;">Collapsible button</span> <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-scripts">This is a collapsible content</div>
Adding Cursors[]
Notice when you hover your mouse above most buttons, the cursor changes to a hand?
It's because the cursor style was set to pointer, or grab. The code is simple. In the style attribute, type cursor:____; and you can put whatever cursor that's compatible on where the underscore is.
Example styling: cursor:grab;
Example code:
<span class="wds-button" style="cursor:pointer;">button</span>
The collapsible button has default cursor of pointer, so it's redundant to add it again.
Adding Background Colors[]
You can also add different colors to your button. The default color is dodgerblue.
Example:
Code:
<span class="wds-button" style="background-color:pink;">button</span>
Same for collapsible.
Example:
Code:
<span class="wds-button mw-customtoggle-scripts" style="background-color:pink;">Collapsible button</span> <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-scripts">This is a collapsible content</div>
You can also make your button gradient!
Example:
Code:
<span class="wds-button"style="background:linear-gradient(to right, powderblue, pink, lightyellow);">Gradient Button!<span>
Example:
Code:
<span class="wds-button mw-customtoggle-scripts" style="background:linear-gradient(to right, powderblue, pink, lightyellow);">Gradient collapsible button!</span> <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-scripts">This is a collapsible content</div>
Adding Text Colors[]
You can also change the text color.
Example:
Code:
<span class="wds-button"><span style="color:magenta;">Colored Text Button!</span>
You can also do this with collapsibles.
Example:
Code:
<span class="wds-button mw-customtoggle-scripts"><span style="color:magenta;">Collapsible Colored Text Button!</span> <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-scripts">This is a collapsible colored text content. </div>
Adding Gradient Text Buttons[]
Example:
Code:
<span class="wds-button"><span style="background:-webkit-linear-gradient(330deg, hotpink, purple); -webkit-background-clip:text; -webkit-text-fill-color:transparent;">Gradient text button!</span>
Example:
Code:
<span class="wds-button mw-customtoggle-scripts"><span style="background:-webkit-linear-gradient(330deg, hotpink, purple); -webkit-background-clip:text; -webkit-text-fill-color:transparent;">collapsable gradient text button!</span> <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-scripts">This is a collapsible gradient text content</div>
Adding Links[]
Replace the EXTERNAL LINK or INTERNAL LINK with the link you want it to direct.
To add an external link, the code would be:
<span class="wds-button">[EXTERNAL LINK button]</span>
Or, for an internal link, the code would be:
<span class="wds-button">[[INTERNAL LINK|button]]</span>
Example:
Code:
<span class="wds-button">[https://www.w3schools.com/ <span style="color:black;">W3schools</span>]</span>
Example:
Code:
<span class="wds-button">[[Link Modification|<span style="color:black;">Link Modification Article</span>]]</span>
You can also read this article for more in-depth instruction.
Piped vs Unpiped[]
Code for piped:
[[Coding Help Wiki|<span class="wds-button">Piped</span>]]
Code for unpiped:
<span class="wds-button">[[Coding Help Wiki|Unpiped]]</span>
Notes[]
- Based on preferences, the button background can be made transparent either by adding
class="wds-is-secondary", or by defining the background color"style="background:none". - Just like background-color property, the text color property
style="color:____"can be defined in the same span tag. - In order to make the entire button cell direct to the link, the span tag needs to be piped. However, the link loses its default site-wide link color, and might need to be set manually.
[[Coding Help Wiki|<span class="wds-button">Main Page</span>]]
