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.
And from active tab:
Related:
circle
- Create circle (class
outer-circle
) and put inside each tab link. Set w/h, bg-color, border-radius and border color & width
- 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
- Add empty div
- Set the div height to 1 or 2 px
- Set the bg-color
Result:
line & tab
- Put this line inside all tab links
- Change tab link position to
relative
- Change line position to
absolute
(Move the element related to the “relative parent” - read her
- 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.
1 Like
It worked perfectly!
Thanks!
1 Like