Price table button design

[Caroline_Magnus]

Hello,
I’m designing a price table with a “annual/biannual/monthly” button that should look like this:

I read in another topic that the best way to build a price table with “annual/monthly” would be using Tabs, so I did it. But now I don’t know how to style the button so it looks like the picture above.

Is it doable?

Thanks,
Carol

---

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[Siton_Systems (Ezra Siton)]

http://new-landing-page-94e5db.webflow.io/

This is little tricky - but you could solve this by CSS only. Keep in mind - my solution is for “regular circle with border” (Your screenshot is circle with white and black border). First try this (Next if you want i will guide you about the nested-circle trick).

step zero

Before you start - create “tab-class” and add this class for all tab-menu items - than ==> remove the background-color from all tabs.

And from active tab:

Related:
https://university.webflow.com/article/tabs#styling-tabs

circle

1. Create circle (class outer-circle) and put inside each tab link. Set w/h, bg-color, border-radius and border color & width
   
   
2. Change circle color by custom embed ( very simple) or custom code - when tabX is active:

<style>
  .w--current .outer-circle{
      background-color: red; 
  }
  
   .outer-circle{
      margin-right: auto; 
	  	margin-left: auto; 
  }
</style>

Also add this margin-right & left auto to align the circle (I dont know why but webflow remove this styles when i publish the site - so add this like this).

The result until now:

---

The line trick

create line

1. Add empty div
2. Set the div height to 1 or 2 px
3. Set the bg-color
   Result:
   
   

line & tab

1. Put this line inside all tab links
   
   
2. Change tab link position to relative
   
   
3. Change line position to absolute (Move the element related to the “relative parent” - read her
   
   
4. Add top value (To align V the line and the circle)
   
   

“cut the line”

Now we going to get rid of this “extra” first and last line:

For the first tab go to the line and add combo-class “first”

Result:

For the last tab add combo class of “last” and add right-margin of 45%

Result:

Mobile - option 1 (Tabs next to each other)

option 2 - hide all extra (circle and line) and use webflow core styles.

[Caroline_Magnus]

It worked perfectly!
Thanks!