How to add a button to a page

An example of what a button would look like is this:

Click here!
This is a test button! Click the button again to collapse this text :)

The code for making a very simple button is this:

```
<div class="mw-customtoggle-BUTTON_NAME" style="color: HEXCODE; background: BGHEXCODE; width: NUMBERpx">BUTTON TITLE</div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-BUTTON_NAME" style="color: HEXCODE">BUTTON TEXT</div>
```

Replace:

**"BUTTON\_NAME"** with any term. **Use a different button name for multiple buttons** (otherwise if you click on one button, all of the buttons with the same name will expand!)

**"HEXCODE"** with the hexcode of what color you want your text to be

**"BGHEXCODE"** with the hexcode of what color you want your background for the button itself to be

**"NUMBER"** with the width (horizontal) you want your button to have

**"BUTTON TITLE"** with the text you would like to be displayed directly on the button

**"BUTTON TEXT"** with the text you would like to appear/disappear when clicking the button

Click these buttons below to learn more about customizing your button!

Basic Styling

Styling is when you make the button look fancier by adding more information on how you want it to look.

Add these attributes to the ***style=""*** sections of your code. Make sure to use a ; (semicolon) in-between each **attribute** (examples of attributes include text-align, font-family, and border-radius)!

(Note: The first line of code is for the button itself while the second line of code is about what appears when you click the button. Edit the first line of code if you wish to change the way the button looks and change the second line of code if you want to change what appears when you click the button)

Here are some examples on things you may want to add:

**Text-align**
This attribute can position your text to go to the left, center, or right.

Example:

BUTTON TITLE
BUTTON TEXT
The code for this:

```
text-align:DIRECTION
```

Replace "DIRECTION" with left, center, or right.

**Font-family**
This attribute will let you add fonts to your button.

Example:

BUTTON TITLE
BUTTON TEXT
The code for this:

```
font-family: FONT
```

Replace "FONT" with the name of the font you would like to use (note: some fonts won't work, it depends per wiki)

**Border-radius**
Example:

BUTTON TITLE
BUTTON TEXT
The code for this:

```
border-radius: NUMBERpx
```

Replace "NUMBER" with how round you want the corners to be (the greater the value, the more round the corners will be).

**Borders**
Example:

BUTTON TITLE
BUTTON TEXT
The code for this:

```
border-radius: NUMBERpx
```

Replace "NUMBER" with how round you want the corners to be (the greater the value, the thicker the border).

**Padding**
This attribute adds space in-between the outer edge of your button (your button's border) and your button's text. You do not need a border to add padding, though.

Example:

BUTTON TITLE
BUTTON TEXT
The code for this:

```
padding: NUMBERpx NUMBERpx
```

Replace "NUMBER" with how much space you want there to be between the border and your text (the greater the value, the more distance).

Advanced Styling

These attributes require more fiddling around with, but aren't too hard to understand and use.

**Box shadow**
This attribute adds a shadow to your button.

Example:

BUTTON TITLE
BUTTON TEXT
The code for this:

```
box-shadow: NUMBER1px NUMBER2px NUMBER3px HEXCODE
```

Replace:

"NUMBER1" with how much you want the shadow to offset in the x axis

"NUMBER2" with how much you want the shadow to offset in the y axis

"NUMBER3" with how much you want your shadow to blur

"HEXCODE" with the hexcode of you want your shadow to be.

A good starting point is using 5 for "NUMBER1", 5 for "NUMBER2", 10 for "NUMBER3", and #000000 for "HEXCODE". However, feel free to change these around to your liking!

**Gradients**
This attribute makes your button's background a gradient. **In order to do this, you will have to replace your "background: BGHEXCODE" code with the code below instead.**

Example:

BUTTON TITLE
BUTTON TEXT
The code for a LINEAR gradient:

```
background: linear-gradient(to DIRECTION, HEXCODE1, HEXCODE2)
```

The code for a RADIAL gradient:

```
background: radial-gradient(HEXCODE1, HEXCODE2)
```

Replace:

"DIRECTION" with the direction you would like your gradient to go (top, bottom, left, right, top left, top right, bottom left, bottom right)

"HEXCODE1" with the first hexcode color you would like your button to have

"HEXCODE2" with the second hexcode color you would like your button to have

You can add as many hexcodes as you like!

Other

**Centering**
This attribute centers not just the text, but also the button itself!

Example:

BUTTON TITLE
BUTTON TEXT
The code for this:

```
<center>TEXT</center>
```

Replace "TEXT" with the text or code you'd like to center!

My final button code:

```
<center><div class="mw-customtoggle-EX6" style="color: white; background: linear-gradient(to bottom, #ff9eef, #ffffff); width: 200px; text-align: center; font-family: Raleway; border-radius: 30px; border: 5px solid #ff94ed; padding: 10px 10px; box-shadow: 5px 5px 10px #808080">BUTTON TITLE</div>
<div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-EX6" style="=color: black; text-align: center; Comfortaa">BUTTON TEXT</div></center>
```

Please note that you can change whatever you'd like, this is just my example code! There are also many other things bits of code you can add to your button as well :)

If you're confused or unsure about something, let me know and I'll try to help!