Sticky Side Button with Personal Popup

1. Shortcode: Button

[button text="Free intake" color="secondary" icon="icon-clock" icon_pos="left" link="#popup-personal" target="_blank" class="sticky-side-button" visibility="hide-for-small"]

[button text="Free intake" color="secondary" expand="true" icon="icon-clock" icon_pos="left" link="#popup-personal" target="_blank" class="sticky-footer-button" visibility="show-for-small"]

2. CSS

/*************** STICKY SIDE BUTTON ***************/

.button:not(.icon).sticky-side-button {
  	right: -65px; /* Negative Margin Right - Change Accordingly  */
    float: right;
	position: fixed;
	top: calc(50% - 47px);
    transform: rotate(90deg);
    z-index:1;
    cursor: pointer;
    border-radius:0px !important;
    margin:0px;
}

.button:not(.icon).sticky-footer-button {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1;
    border-radius:0px !important;
    margin-bottom: 0em;
}

/*************** POPUP: PERSONAL ***************/

.popup-personal img {
    border-radius:99px; 
    border: 5px solid #fff;
    width:120px;
    height:120px;
}

.popup-personal .col-inner {
     margin-top:-80px;
}

.lightbox-content {
    border-radius:5px; 
}

3. Shortcode: Popup

[row label="CSS* Popup Personal" style="collapse" h_align="center" class="popup-personal"]

[col padding="20px 0px 10px 0px" align="center" class="popup-column"]

[ux_image id="https://www.sebdelaweb.com/wp-content/uploads/guilherme-stecanella-_dH-oQF9w-Y-unsplash.png"]


[/col]

[/row]
[row label="Content"]

[col span__sm="12" align="center"]

Free video intake
Book a free call with Julietta.
[title style="center" text="Leave your details" margin_bottom="10px" size="70"]

Place your favourite form script or shortcode.

[/col]

[/row]

4. Lightbox

[lightbox id="popup-personal" padding="30px" width="600px"]
[block id="popup-personal"]
[/lightbox]