Pricing toggle

Pro

Turn Elementor's default tabs into a clean pill-style toggle. A small amount of CSS transforms the tab headers into a compact switcher, perfect for monthly/yearly pricing sections.

Category: Code V3
Built with: Needs Elementor Pro. Its CSS sits in the Custom CSS field, an Elementor Pro feature.
Widgets: Container, Heading, Text editor, Icon, Icon List, Tabs
Custom code: CSS
Need help?: Support
Guides
Email

Preview

How it works

The simple CSS is easy to adjust depending on your needs. Simply change the color codes to match your brand and adjust any padding or border radius values to make it your own.

Custom CSS

The CSS to make the animation for this power up is included in the top level parent container Advanced > Custom CSS. No additional setup needed. Just copy the component and the styles come with it.