Button Border doesn't have option for Interactive state

[dannikb]

I just installed Pro Version: 6.8.1 on a new site in dev.

I can set the color for a border on a button, but the option to set an “Interactive” color is not visible. Usually, there’s a little tab at the top, but that’s not there.

[prakash_s]

Hello @dannikb,

Thanks for writing to us.

I would suggest you go to the Button element -> Enable the Border toggle->go to the Color ->set the border color. Please have a look at the given screenshot below.

Hope it helps
Thanks

[dannikb]

Hi, I think you misunderstood the question.

I am able to set the color of the border on a button. I am not able to set a different color for the “Interaction” state. As you can see in this screenshot, the “Interaction” tab at the top of the Border Color Picker for a button is not visible:

In previous versions, I could select one color for the “Base” and one for the “Interaction.”

Thanks,
Danni

[GaryJohnsonDesign]

I have noticed that too.

In order for the interaction option to be available for the border color, all sides of the border on the button need to be linked so you’re controlling all borders at once.

As a workaround, I just use some element(on the button) css, for example: $el:hover{border-left: 8px solid red;}

[dannikb]

Thanks @GaryJohnsonDesign! I wasn’t sure if this was a bug in the new version or if it’s always been that way and I’ve just never noticed. Seems like an oversight either way.

[charlie]

It’s definitely still there for all the sites I’ve looked at. Do you see it on our playground?

[dannikb]

@charlie
The other contributor was correct. On the Playground, I see an option to set an “Interaction” color on the border when the “link sides” option is on. But when off, I do not.

[GaryJohnsonDesign]

I am able to reproduce the issue and the working version.

Try this.

If you add a new button element, you have to turn on the border property and then set the style to solid or whatever, then set the width, and then set the colors for base and interaction.

Then if you unlink the sides, it keeps those border properties on all four sides individually. You can then set the sides you don’t want to a style of none. Leave the side you want on there and you can now edit the base and interactive state color like normal.

However, if you add a new button element and turn on the border property and instantly unlink the sides, you will not be able to set the interaction state within the color selector but would have to use css.

So, this is definitely seems like some type of a bug. But if you set the border properties of style, width, and color for base and interaction while sides are linked and then unlink them, then it works.

Does that make sense?

[charlie]

Thanks for the instructions. I think we can fix that quickly. Have a great day.