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.

Copy

Unlock with Pro

Released

3 weeks ago

Category

Custom code

CSS

Built with

Need help?

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.

/*Element UI tab toggle pill*/
.e-n-tabs-heading {
    background: #0F172A;
    border-radius: 99px;
    padding: 6px;
    width: fit-content;
    margin: 0 auto;
}