With this element, you can create a stylish button with smooth animations and a masking effect that reveals or hides parts of the button during interaction. When users hover over or click the button, the animated masking effect adds a modern and engaging visual experience. It helps make important actions more noticeable while enhancing the overall design of your website.
Required Setup
- Bricks Builder installed & activated.
- You need to have the WDesignKit plugin installed and activated.
- Make sure you’ve created an account and logged into it.
- Make sure you’ve downloaded the Masked Animated Button element.
How to Activate the Masked Animated Button Element?
Go to
- WDesignKit → Widgets → Browse Widgets.
- Search the element name and select Bricks as the Page Builder.
- Click on the Download icon.
Use Cases
Use the Masked Animated Button element when you want to add a visually engaging call-to-action button with smooth hover animations and masking effects. It helps highlight important actions on your website while adding a modern and interactive touch to the design. The animated masking effect draws user attention and encourages interaction without making the layout feel heavy.
Best For:
- Call-to-Action Sections: Highlight important actions like “Get Started,” “Learn More,” or “Contact Us” with an animated button that attracts user attention.
- Landing Pages: Use animated buttons to guide visitors toward key actions such as signing up, purchasing a product, or exploring services.
- Product Showcase Pages: Encourage users to explore products with engaging buttons like “View Product,” “Buy Now,” or “See Features.”
- Portfolio & Creative Websites: Add stylish animated buttons for actions like “View Project,” “Explore Case Study,” or “See Portfolio.”
- Agency & Business Websites: Promote services or consultations with visually appealing buttons such as “Request a Quote” or “Book a Consultation.”
- Marketing & Campaign Pages: Draw attention to campaign actions like “Join the Campaign,” “Register Now,” or “Claim the Offer.”
- Event & Webinar Pages: Encourage registrations with animated buttons like “Register Now” or “Reserve Your Spot.”
- Mobile-Friendly Interfaces: Perfect for modern websites where interactive buttons improve engagement and provide clear navigation across devices.
- Modern UI Designs: Ideal for websites aiming for a stylish and interactive experience, where subtle animations enhance user engagement and visual appeal.
How to Use the Masked Animated Button Element in Bricks?
Add the Masked Animated Button element to the page.
LAYOUT
You can select a pre-defined style from the Style dropdown.
Note :From this tab, based on the style you selected, you will see different options to add the content.
CONTENT
In the Button Text section, you can add the text for the button.
You can add an icon or SVG to the button from the Select Icon section.
Then, in the URL section, you can add the button URL.
By enabling the Open in new tab toggle, the attached URL will open in a new browser tab.
EXTRA OPTIONS
Then, from the Alignment section, you can align the button for responsive devices.
By enabling the Tablet Link toggle, you can activate the button link for tablet devices.
By enabling the Mobile Link toggle, you can activate the button link for mobile devices.
Then, from the Style tab, you can further customize the style of the Masked Animated Button.