Want to create interactive content? It’s easy in Genially!
Button Code
Connected Community
Created on October 11, 2023
Start designing with a free template
Discover more than 1500 professional designs like these:
Transcript
Basic Button Code:<a class="btn" href="https://www.howtocanvas.com/">Home</a>
"Your content is good, but it will engage much more if it's interactive." ~ Genially
Other things I can adjust on my button:
Things I can adjust on my Button:
Both at once!
Size
If I discover other ways to modify buttons in HTML then I will add them here.
Color
Basic Button Code:<a class="btn" href="https://www.howtocanvas.com/">Home</a>
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
So now we have to create the Destination
It's easier than it sounds, I promise you.
<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>
Warning: When you're in the RTE you will see the content. You should not see it in the save position.
"href" in code
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
"a-tag" 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
Bookmark Tag
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.
Definition from Hub Spot
Button Colors
Matching Code
<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>
Element Content
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
"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: 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
"a-tag" 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
Element Content
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
"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
Button sizes:
Matching 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>
"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
"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
"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
"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
Button Colors
Matching Code
<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>
"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 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
Combining Components:
Size goes first.
<a class="btn btn-large btn-success" href="https://www.proxlearn.com/">Home</a>
Color goes second.
"a-tag" 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 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
Element Content
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
"div-tag" in code
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
Element Content
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
"href" in code
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
"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