From L2R – Library

Elementor’s copy paste from other sites does not work – Here is the Javascript for the Accordion. (made with regular elementor components)

				
					<script>
	/* jshint esversion: 6 */
    document.addEventListener("DOMContentLoaded", function() {
        const acc = document.getElementsByClassName("c-a-heading");

        for (let i = 0; i < acc.length; i++) {
            acc[i].addEventListener("click", function() {
                this.parentElement.classList.toggle("c-a-active");
            });
        }
    });
</script>

And the CSS:

				
					.custom-accordion .c-a-heading {
    cursor: pointer;
}
.custom-accordion .c-a-heading .accordion-minus {
    display: none;
    transition: 0.5s;
}

.custom-accordion .c-a-content {
    max-height: 0;
    overflow: hidden;
    transition: 0.5s;
}

.c-a-active .c-a-heading .accordion-minus {
    display: inline;
    transition: 0.5s;
}

.c-a-active .c-a-heading .accordion-plus {
    display: none;
    transition: 0.5s;
}

.c-a-active .c-a-heading .c-a-heading-wrapper,
.c-a-active .c-a-heading .c-a-heading-wrapper::before {
    border-radius: 0 9px 0 0;
    border-bottom: 1px solid #121212;
    transition: 0.5s;
}

.c-a-active .c-a-heading img {
    border-radius: 10px 0 0 0 !important;
    transition: 0.5s;
}

.c-a-active .c-a-content {
    max-height: 100vh;
    transition: 0.5s;
}
.c-a-heading {
    transition: 0.5s;
}

The Button was an interesting challenge. The gradient on the border radius is not so straight forward. Add these CSS Classes to Buttons and they will have a gradient border colour with border radius and a glow hover effect.

Here’s the CSS:

				
					/* Adding the Glow Effect to Buttons */

.glow-btn .elementor-button:hover,
.glow-btn .e-n-tab-title:hover {
    filter: drop-shadow(0 -1px 6px #00E2B9BF);
}

/* ---------------------------------------------------------------
    Styling the secondary button: border with a gradient
    and a transparent background.
    
    All not selectors are to ensure that we aren't making
    other links that share classes look like secondary buttons
   --------------------------------------------------------------- */
   
/* Refine with better selectors to avoid having to use :not */

.border-grad a,
.border-grad .e-normal:not(.e-active):not(.e-con) {
    background: transparent !important;
    position: relative;
}

.border-grad a:not(.elementor-toggle-title)::before,
.border-grad .e-normal:not(.e-active):not(.e-con)::before{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 5px;
    border: 1px solid transparent;
    background: linear-gradient(0deg,red,blue) border-box;
    -webkit-mask:
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    -webkit-mask-composite: exclude;
}

.border-grad a:not(.elementor-toggle-title):hover::before,
.border-grad .e-normal:not(.e-active):not(.e-con):hover::before {
     border: 2px solid transparent;
    background: linear-gradient(0deg,green,blue) border-box;
    -webkit-mask:
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    -webkit-mask-composite: exclude;
}