Button Code

"Your content is good, but it will engage much more if it's interactive." ~ Genially

Basic Button Code:<a class="btn" href="https://www.howtocanvas.com/">Home</a>

If I discover other ways to modify buttons in HTML then I will add them here.

Both at once!

Other things I can adjust on my button:

Things I can adjust on my Button:

Color

Size

Button Pop Up Code:<a class="btn" href="#PopupTitle">Home</a>

"Your content is good, but it will engage much more if it's interactive." ~ Genially

Basic Button Code:<a class="btn" href="https://www.howtocanvas.com/">Home</a>

So now we have to create the Destination

It's easier than it sounds, I promise you.

Warning: When you're in the RTE you will see the content. You should not see it in the save position.

<div id="PopupTitle" class="enhanceable_content dialog">This is where your content will go. You can put placeholder text and edit it in the RCE, but it’s really best if you format it in the HTML editor if you are able.</div>

For teachers: href tells the computer where the end point is, or where clicking here leads to.Coder's Definition: stands for "hypertext reference" It is an attribute inside the opening a tag. The href attribute indicates the destination of the hyperlink.

Definition from Hub Spot

"href" in code

For teachers: This means that the core of this section of code is for a hyper link. Proper Definition: <a> tag defines a hyperlink

Definition from W3schools.com

"a-tag" in code

Definition from Hub Spot

For teachers: href tells the computer where the end point is, or where clicking here leads to. Instead of a URL a #Title is used to indicate that it is elsewhere on the page.Coder's Definition: stands for "hypertext reference" It is an attribute inside the opening a tag. The href attribute indicates the destination of the hyperlink.

Bookmark Tag

Matching Code

Button Colors

<a class="btn btn-primary" href="https://www.google.com/">Home</a><a class="btn btn-warning" href="https://www.google.com/">Home</a> <a class="btn btn-danger" href="https://www.google.com/">Home</a><a class="btn btn-success" href="https://www.google.com/">Home</a> <a class="btn btn-info" href="https://www.google.com/">Home</a><a class="btn btn-link" href="https://www.google.com/">Home</a><a class="btn btn-beta" href="https://www.google.com/">Home</a><a class="btn btn-publish" href="https://www.google.com/">Home</a>

For teachers: This is the text the students will see.Coder's Definition: This is the bits between the opening a tag and the closing a tag. Example: <a>THIS PART </a>

Definition from Stack Overflow discussion

Element Content

For teachers: Class tells the computer what type of content is in the rest of this portion of code.Coder's Definition: The class attribute specifies one or more classnames for an element. The class attribute is mostly used to point to a class in a style sheet.

Definition from W3schools.com

"class" in code

For teachers: Class tells the computer what type of content is in the rest of this portion of code.Coder's Definition: The class attribute specifies one or more classnames for an element. The class attribute is mostly used to point to a class in a style sheet.

Definition from W3schools.com

"class" in code

For teachers: This means that the core of this section of code is for a hyper link. Proper Definition: <a> tag defines a hyperlink

Definition from W3schools.com

"a-tag" in code

For teachers: This is the text the students will see.Coder's Definition: This is the bits between the opening a tag and the closing a tag. Example: <a>THIS PART </a>

Definition from Stack Overflow discussion

Element Content

For teachers: This means that the core of this section of code is for a hyper link. Coder's Definition: <a> tag defines a hyperlink

Definition from W3schools.com

"a-tag" in code

<a class="btn btn-mini">mini button</a> <a class="btn btn-small">small button</a> <a class="btn btn-group">"medium" button</a> <a class="btn btn-large">large button</a>

Matching Code:

Button sizes:

For teachers: Class tells the computer what type of content is in the rest of this portion of code.Coder's Definition: The class attribute specifies one or more classnames for an element. The class attribute is mostly used to point to a class in a style sheet.

Definition from W3schools.com

"class" in code

For teachers: This means that the core of this section of code is for a hyper link. Coder's Definition: <a> tag defines a hyperlink

Definition from W3schools.com

"a-tag" in code

For teachers: Class tells the computer what type of content is in the rest of this portion of code.Coder's Definition: The class attribute specifies one or more classnames for an element. The class attribute is mostly used to point to a class in a style sheet.

Definition from W3schools.com

"class" in code

For teachers: This means that the core of this section of code is for a hyper link. Coder's Definition: <a> tag defines a hyperlink

Definition from W3schools.com

"a-tag" in code

Matching Code

Button Colors

<a class="btn btn-primary" href="https://www.google.com/">Home</a><a class="btn btn-warning" href="https://www.google.com/">Home</a> <a class="btn btn-danger" href="https://www.google.com/">Home</a><a class="btn btn-success" href="https://www.google.com/">Home</a> <a class="btn btn-info" href="https://www.google.com/">Home</a><a class="btn btn-link" href="https://www.google.com/">Home</a><a class="btn btn-beta" href="https://www.google.com/">Home</a><a class="btn btn-publish" href="https://www.google.com/">Home</a>

For teachers: This means that the core of this section of code is for a hyper link. Coder's Definition: <a> tag defines a hyperlink

Definition from W3schools.com

"a-tag" in code

For teachers: This means that the core of this section of code is for a hyper link. Coder's Definition: <a> tag defines a hyperlink

Definition from W3schools.com

"a-tag" in code

Color goes second.

Size goes first.

<a class="btn btn-large btn-success" href="https://www.proxlearn.com/">Home</a>

Combining Components:

For teachers: This means that the core of this section of code is for a hyper link. Proper Definition: <a> tag defines a hyperlink

Definition from W3schools.com

"a-tag" in code

For teachers: This means that the core of this section of code is for a hyper link. Coder's Definition: <a> tag defines a hyperlink

Definition from W3schools.com

"a-tag" in code

For teachers: This is the text the students will see.Coder's Definition: This is the bits between the opening a tag and the closing a tag. Example: <a>THIS PART </a>

Definition from Stack Overflow discussion

Element Content

For teachers: This is identifying a section of the code. NOTE: Each div section must have a unique id. Coder's Definition: <div> identifies a section.

Definition from DoFactory.com

"div-tag" in code

For teachers: This is the text the students will see.Coder's Definition: This is the bits between the opening a tag and the closing a tag. Example: <a>THIS PART </a>

Definition from Stack Overflow discussion

Element Content

For teachers: href tells the computer where the end point is, or where clicking here leads to.Coder's Definition: stands for "hypertext reference" It is an attribute inside the opening a tag. The href attribute indicates the destination of the hyperlink.

Definition from Hub Spot

"href" in code

For teachers: This means that the core of this section of code is for a hyper link. Coder's Definition: <a> tag defines a hyperlink

Definition from W3schools.com

"a-tag" in code