This video will show you the basic code mods you need to change the style, and text on your everwebinar registration button.
There are two elements to your everwebinar code -
1. The code you are given to embed on to your page whether it be Click Funnels, Leadpages, Thrive Themes or any other page editor.
2. The style code you use to over-write the look and feel of the button.
Let's start with the Everwebinar embed button code.
Here is a sample of code I have put xxx's over some parts that are not relevant.
Below are two highlighted terms, one is the button width. Everwebinar has it preset to 300px (which stands for pixels). If you want it wider you can specify a pixel width or a % of the container the button is in.
Second you will see the words CLAIM YOUR SPOT highlighted. You can change these to whatever you want and it will appear on the button.
<link href="//events.genndi.com/assets/css/register_button.css" rel="stylesheet"><div style="margin:auto;width:400px;"><div class="embedded-joinwebinar-button"><button type="button" class="btn btn-default css3button" title="regpopbox_XXXXXXXXXXX_8ced2b2555"><span>CLAIM YOUR SPOT NOW</span></button></div></div><script src="//events.genndi.com/register.evergreen.extra.js" language="javascript" type="text/javascript" async=""></script><img src="//events.genndi.com/tracker?action=registration-evergreen&webicode=8ced2b2555&version=&memberid=XXXXXXXXXX" style="visibility:hidden; height:0px; width:0px; border:none;" draggable="false">
If you save your page now you will have the usual ugly stock standard Everwebinar button. Now for the styling.
Everwebinar Button Style Code
This is not given to you by the guys at Webinar Jam but here is the code you can copy here. Copy the raw code below into the custom style sheet area of your software.
Raw code:
.btn.btn-default.css3button {
background: #c00000;
font-weight: 700;
border: 3px solid #54C2B3;
padding: 4%;
border-radius: 25px;
font-size: 1.7rem;
font-family: ‘Montserrat',sans-serif;
text-transform: capitalize;
}
Notes on the code. Basically you can change anything in this code and it will change the look of your button, so play and have fun.
.btn.btn-default.css3button {
background: #c00000; (this is the color code of the button)
font-weight: 700; (this will change the font weight ie. bold, normal, etc)
border: 3px solid #54C2B3; (this is the border width and color)
padding: 4%; (this is the area around the text)
border-radius: 25px; (this is the curving of the corners - set to 0px for a square button)
font-size: 1.7rem; (size of the writing on the button)
font-family: ‘Montserrat',sans-serif; (font family would usually need to be referenced by your software)
text-transform: capitalize; (delete if you don't want it capitalized)
}
Don't panic when it comes to modifying anything in the CSS. If something goes adrift just delete the CSS code you inserted and try again.
Happy customizing AND I hope your webinar goes well!
