HTML Editor
HTML (HyperText Markup Language) is the code used to structure content on the web. It tells the browser what is a heading, paragraph, link, image, and more. To open the HTML editor on your content field, click the </> button (circled in orange in the image above.
Click here to learn more about using HTML with Involve.
Buttons
Buttons are a fun way to add visual interest and make a link stand out. The button code creates a rounded square that visitors can click, just like a regular link—but styled to look like a button.
For example:
-
<a>is the tag for a link. -
href=""is where you put the link’s destination. -
class="btn"applies the button style to the link.
This turns a plain text link into a styled button that’s easier to notice and click.
Quick Colors
We provide the following quick color buttons to easily copy and paste into your HTML editor.
To insert a default button color.
- Open the HTML editor </> in your content field.
- Copy and paste the code into your HTML editor </>.
- Replace LINK with the link to your desired website.
- Replace the bolded word with the text you want displayed on your button. For example, replace Default with Click Here to make your button read "Click Here."
1. <a href="LINK" class="btn btn-default">Default</a>
2. <a href="LINK" class="btn btn-primary">Primary</a>
3. <a href="LINK" class="btn btn-success">Success</a>
4. <a href="LINK" class="btn btn-info">Info</a>
5. <a href="LINK" class="btn btn-warning">Warning</a>
6. <a href="LINK" class="btn btn-danger">Danger</a>
Customizing Colors
You can customize colors in a button by adding style="" into the code. Inside of the quotes, you can add what you are looking to customize.
Insert the follow code into your button to update the button color and text color.
style="background-color:purple;color:white;"
Here's an example of the code that created the button displayed above:
<a href="LINK" class="btn" style="background-color:purple; color:white;">Button name</a>
Here's an example of the code that created the button displayed above using HEX codes:
<a href="LINK" class="btn" style="background-color:#ffb7cc;color:#002454;" >Button name</a>
To insert a custom color button.
<a href="LINK" class="btn" style="background-color:purple; color:white;">Button name</a>
- Open the HTML editor </> in your content field.
- Copy and paste the code above into your HTML editor </>.
- Replace LINK with the link to your desired website.
- Replace the bolded background color with the color or HEX code you want displayed on your button.
- Replace the bolded color with the color or HEX code you want displayed on your button text.
Customizing Size
You can change the size of a button by adjusting the "class" of the button.
-
class="btn btn-lg"makes a large button -
class="btn" is the default button size -
class="btn btn-sm"makes a small button -
class="btn btn-xs"makes an extra-small button
Example of the code below:
<a href="LINK" class="btn btn-lg" style="background-color:purple; color:white;">Large Button</a> <a href="LINK" class="btn" style="background-color:purple; color:white;">Default Button</a> <a href="LINK" class="btn btn-sm" style="background-color:purple; color:white;">Small Button</a> <a href="LINK" class="btn btn-xs" style="background-color:purple; color:white;">X-Small Button</a>
1. <a href="LINK" class="btn btn-lg" style="background-color:purple; color:white;">Large Button</a>
2. <a href="LINK" class="btn" style="background-color:purple; color:white;">Default Button</a>
3. <a href="LINK" class="btn btn-sm" style="background-color:purple; color:white;">Small Button</a>
4. <a href="LINK" class="btn btn-xs" style="background-color:purple; color:white;">X-Small Button</a>
Comments
Please sign in to leave a comment.