How can I make the button-state appear focused from start?

Hi,

How can I make my button appear focused from start? Button 1 should be black, because the big number “1” is visible. When clicking on the others buttons it should go back to the black outline.

Here’s a link:

https://preview.webflow.com/preview/buttonfocusedfrombeginning?utm_medium=preview_link&utm_source=designer&utm_content=buttonfocusedfrombeginning&preview=db04f558bbcd8205f8584751392a1a3c&mode=preview

Kind regards Maja

1 Like

I am also looking for a similar solution where I want my button, which acts as a filter nav button, to always be bolded after I click elsewhere on the page.

Here is my READ-only link:
https://preview.webflow.com/preview/kats-gd-public-one?utm_medium=preview_link&utm_source=designer&utm_content=kats-gd-public-one&preview=0e01223717f13c729c5f0c6d13931308&pageId=5ef0c0266e8e1b6803a8f704&mode=preview

@steveshearer - it looks like @majaliv posted this twice. I answered it here: Button state focused from start? - #3 by majaliv

@sam-g

Thanks! I had a look. Do you know if there is a solution to my problem specifically? I need my buttons to not loose its focus state if you click somewhere else on the page. This is especially an issue with mobile since everytime you scroll you end up clicking.

Here is the link so you can see what I mean:
https://preview.webflow.com/preview/kats-gd-public-one?utm_medium=preview_link&utm_source=designer&utm_content=kats-gd-public-one&preview=0e01223717f13c729c5f0c6d13931308&pageId=5ef0c0266e8e1b6803a8f704&mode=preview

There are two ways you can go.

You can set those via JS OR you can convert your layout to use tabs instead of buttons. They have a default state you can set and don’t require custom code!