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:

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

<div class="mw-customtoggle-EX6" style="color: white; background: black; 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 class="mw-collapsible mw-collapsed" id="mw-customcollapsible-EX6" style="=color: black; text-align: center; Comfortaa">BUTTON TEXT

The code for this: 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:

<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 class="mw-collapsible mw-collapsed" id="mw-customcollapsible-EX6" style="=color: black; text-align: center; Comfortaa">BUTTON TEXT

The code for a LINEAR gradient:

The code for a RADIAL gradient: 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!

<div class="mw-customtoggle-other" style="font-size: 25px; color: white; text-align: center; background:#ff96f5; padding: 15px; border-radius: 100px; width: 250px">Other <div class="mw-collapsible mw-collapsed" id="mw-customcollapsible-other" style="text-align: left; color:#ff94ed">

Centering

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

Example:

<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 class="mw-collapsible mw-collapsed" id="mw-customcollapsible-EX6" style="=color: black; text-align: center; Comfortaa">BUTTON TEXT

The code for this: Replace "TEXT" with the text or code you'd like to center! My final button code: 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!