Button Code
Connected Community
Created on October 11, 2023
More creations to inspire you
THE MESOZOIC ERA
Presentation
ALL THE THINGS
Presentation
ASTL
Presentation
ENGLISH IRREGULAR VERBS
Presentation
VISUAL COMMUNICATION AND STORYTELLING
Presentation
GROWTH MINDSET
Presentation
BLENDED LEARNING
Presentation
Transcript
"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