1. Navigate to the page you would like to add the Beyond Labz button.
2. In the editing tool bar find the Beyond Labz icon.
3. Type the "Lab Name" and paste the lab bench URL, including the https://.
4. Format the button. EX: align center, place the button between steps 1 & 2.
5. Add the CSS Code Block to the Custom CSS section.
a.de-beyondLabz {
display: inline-block;
background: #103E5B; /* navy */
color: #ffffff !important; /* white text */
padding: 10px 20px;
border-radius: 999px; /* pill shape */
font-family: Lato, Arial, sans-serif;
font-size: 14px;
font-weight: 700; /* bold */
text-decoration: none !important;
border: 2px solid #103E5B;
cursor: pointer;
margin: 8px 0;
transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease;
}
/* Hover + focus */
a.de-beyondLabz:hover,
a.de-beyondLabz:focus {
background: #28A594 !important; /* teal hover */
color: #ffffff !important; /* keep white text */
text-decoration: none !important;
transform: translateY(-1px);
}
/* Optional keyboard focus ring */
a.de-beyondLabz:focus {
outline: 3px solid #28A594;
outline-offset: 2px;
}
Click to copy
0 Comments
Add your comment