Price table button design

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)

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.
image
And from active tab:
image

Related:

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:
image


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
    image
  2. Change tab link position to relative
    image
  3. Change line position to absolute (Move the element related to the “relative parent” - read her
    image
  4. Add top value (To align V the line and the circle)
    image

“cut the line”

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

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

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

Result:
image

Mobile - option 1 (Tabs next to each other)
image

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

1 Like

It worked perfectly! :grin:
Thanks!

1 Like