Search for the "selected" state on a Button

Design help General
1

Hi everyone, I hope I can find some help.
I’m trying to get a new state on a button, on the buttons I have 5 states available, None, Hover, Pressed and Focused. I’m looking for a state called “Selected” so that the button stays “pressed” when clicked. I found the perfect button on a “Made in Webflow” site but I can’t find how it was done.

I put you the link of the site with the button.
Once on the link click on a product, butons (12 packs 24 packs) is on the product page.

Thank’s

2

Hi Melchior,

Buttons do not have a sticky “pressed” state like checkboxes or radio buttons do. What you’re seeing on the Rye River site is Webflow’s e-commerce system presenting a product variant selection in a radio-button-like UI. This is done using a bit of script to change the classes on the DIVs when you click one.

If you happen to be using Webflow’s e-commerce platform, and you’re displaying variants, that’s already built for you. If you’re looking to create that same depressed-button effect somewhere else, you have two main options;

  1. Write a similar script to detect clicks, and change the classes within the containing group. Then you’ll have your “radio button” effect, but you’ll have to think about what you’re doing with it, e.g. whether you’re trying to capture that as part of FORM data.

  2. Use radio buttons and labels as they currently exist and CSS style them to look like buttons. That has its own challenges and browser support issues, but it’s likely the best option for you.

Here’s a demo of how to implement that second option;
https://webflow-forms-demo.webflow.io/custom-radio-buttons

In a small piece of CSS, you’ll need to style the label for your checked state, and you’ll need to hide the little circular bit of the radio button INPUT element. Make sure to test this on all the browsers you want to support, and adapt it accordingly;

<style>
.custom-radio:has(input:checked) {

	/* Style your button how you want it to appear when it's checked */
	background-color: black;

}
.custom-radio .w-radio-input {
	visibility: hidden; 
}
</style>
1 Like
3

Hi, thank you i succeeded !