Instructions
Watch the video tutorial and follow all the steps. Check out my example version for a blur background on a tooltip.
- Make sure you Elementor Pro installed on your website.
The custom css code
Custom css for the blur background
<style>
.e-hotspot__tooltip {
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
}
</style>
Example HTML for a button (paste this on the Elementor editor)
<button class="button1">Buy now</button>
Example CSS for a button with hover effect (paste this before the </style>)
.button1{
background-color: #fff;
color: #C25BAB;
border: none;
border-radius: 99px;
padding: 12px 30px 12px 30px;
font-size: 15px;
}
.button1:hover{
background-color: #C25BAB;
color: #fff;
border: none;
}
Don’t just copy and paste the code on your website. It only works if you follow the steps in the tutorial.