Elementor - Add Codepen Codes and a Button - Super Easy

[@andonisr]

Somehow, the 2 buttons I've tried do not come out the same as in their website. Following exactly your video ( tags, etc). But outcome is different somehow.

[@websquadron]

Is there any JS library that needs to be added too?

[@andonisr]

Actually, what I discovered was that I'd set some predefined values in Site Settings/Buttons that were affecting the outcome...what do you know right...? Thank you though..!@@websquadron

[@qinpra]

What if the button is for a dynamic content. Can we take the css only? Btw Imran thank you for the video

[@seppneimusser5723]

Can I use more than one DIFFERENT HTML Widget per page with different HTML/CSS code?

[@websquadron]

Yes

[@borisnieminen677]

Thanks Imran, excellent. Just to clarify, as far as hover effects go, they will only function on desktop? What is the alternative for mobile devices? Thx

[@websquadron]

Hover effects on mobile are never a good idea as too many effects as we scroll up and down is a pain.

[@jasonbeard]

Very good. What I'd like to know is, how to add a spinner after click, so the viewer knows the button is doing something before the page changes, how to do that??? Similar to the Elementor SAVE button spinner

[@websquadron]

You need to add page transitions for that. Elementor has that built in after you activate the experiment.

[@moondodelarte9656]

You are the best and became my new favorite youtuber! LOOOOOOVE YOUR VIDEOS! Thank you so much!

[@websquadron]

Wow, thanks! It means a lot. I know that I talk too much sometimes, or am quite loud, but I love to share and hope that we all have fun!

[@roppor2194]

Imran, this is a great video, but put out the second short part. Is it possible to add a button or other element for quick reuse on the site, save the element as a widget, or a shortcode?

[@russellmorgan9018]

Use the Unlimited Elements plugin. You can easily build your own widgets, and even re-use them on other websites.

[@websquadron]

Agreed with Russell. That's a decent way to do it. Or - you can just copy and paste onto other pages.

[@andonisr]

I have used UE in the past. It does have a bit of a learning curve to do it and add it as a widget - but the only way to go if you want it as a widget and not just use the HTML widget every time for a button. @@websquadron

[@simeonnenov3499]

Hello there, I was trying to add the same button to my website (I use Elmentor PRO) and I found your video. I have one problem though. The CSS messs up my header and footer, regardless of where I added it. I deleted the body selector but it doesnt help. Can you help me fix this issue. Thank you!

[@websquadron]

The code came from the developers that pasted in on Codepen. Have you asked them?

[@simeonnenov3499]

@@websquadron No, I havent. But I assumed that you will know since you are making a tutorial with it. Try to add the code where there is a header and a footer and you will see what I am talking about. Otherwise the point of making a tutorial like this is almost none because people cant use it.

[@websquadron]

@@simeonnenov3499 Not sure what issue you're getting as I added a Codepen to the Header Template, the Page, and the Footer Template, and all fine; see this page: staging3.websquadron.co.uk/codepen/ Are you adding ..... between the CSS code bit. I've tested these out and used them fine with other widgets. Take care.

[@simeonnenov3499]

@@websquadron Hello, I found from where the issue was coming. the tags were the problem. I just gave the tag a specific class so the css affected only the button. Thank you anyway.

[@websquadron]

@@simeonnenov3499 Great - glad you got there.

[@uffeson]

Thanks a lot for this nice video. Is it possible to change the black background in the button. I have tried but without luck. If it is possible, please tell me how. Thanks again.

[@websquadron]

That would depend on the button, but inside the CSS code, you'll see lots of #111111 codes. Modify the one that is #000000 or #000.

[@sjdbfosuhfouehu3]

This always happens - every time i create a button using HTML and CSS the borders becomepink once i click the button. How don’t know why it happens.. Do you know why?

[@websquadron]

Was it with this particular button? Can you share the URLand which button?

[@sjdbfosuhfouehu3]

@@websquadron I will recreate it and share the link in a few minutes - it happens with all buttons from cssbuttons.io

[@willspat922]

Same things happens to me, with any button I pick.

[@seppneimusser5723]

How to add an image to the elementor HTML Widget?

[@websquadron]

You need some syntax

[@seppneimusser5723]

@@websquadron Syntax? I need a link to the image...

[@theunifiedfield.]

This is really helpful, thank you!

[@rightpadding]

How do you apply this globally?

[@websquadron]

Add to one button, then right click and add this as a Global Widget so you don't have to keep repeating per button.

[@rightpadding]

@@websquadron thanks!

[@digwillhachi]

dont forget to save it as a global element so you can use anywhere on your site.

[@websquadron]

Indeed :)

[@jenithajeyakumar105]

Thanks bro

[@resekai]

Wait, more is less and less is more? @___@ *brain melts

[@boldbaatarshinebayar723]

You are god. Very thank u so much

[@websquadron]

No problem

[@Promarket-academy]

this is not good content.i report that

[@websquadron]

Okay, many thanks for reporting it. And I hope you can explain to them exactly why?