Buttons

WikiText does **not** function in the comments. To test out your coding, please either visit your sandbox or this page's talk page.

## 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:

button

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:

Collapsible button

This is a collapsible content
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:

button

```
<span class="wds-button" style="border:solid black 2px;">button</span>
```

You can also do this with a collapsible button:

Collapsible button

This is collapsible content
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:

button

```
<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:

button

Code:

```
<span class="wds-button" style="background-color:pink;">button</span>
```

Same for collapsible.

Example:

Collapsible button

This is collapsible content
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:

Gradient Button!

Code:

```
<span class="wds-button"style="background:linear-gradient(to right, powderblue, pink, lightyellow);">Gradient Button!<span>
```

Example:

Gradient collapsible button!

This is collapsible content
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:

Colored Text Button!

Code:

```
<span class="wds-button"><span style="color:magenta;">Colored Text Button!</span>

```

You can also do this with collapsibles.

Example:

Collapsible Colored Text Button!

This is a collapsible colored text content.
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:

gradient text button!

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:

Collapsible gradient text button!

This is a collapsible gradient text content
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:

W3schools (external)
Code:

```
<span class="wds-button">[https://www.w3schools.com/ <span style="color:black;">W3schools</span>]</span>
```

Example:

Link Modification Article

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

Unpiped Piped

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>]]
```