Button text color bug

Since there is no “All Buttons” style and buttons seem to be a special case of Links, if you style your links and then try to style buttons, you can run into some nasty issues. Here’s how to reproduce the one I saw:

  1. Change None link color to Red
  2. Change Hover link color to Blue
  3. Add a button

In this case, your button’s text will either be white in the None case and Blue in the Hover case, or Red in the None case and Blue in the Hover case.

Next, do this:

  1. Change the button’s text color to “white”

This fixes the button so that it is always white for the None case, but the Hover case is still Blue.

Finally, do this:

  1. Try to change the Hover for the button to have a text color of “white”

You’ll notice that you can’t set the Hover text color to white since WebFlow believes that the button inherits its Hover color from its base state, when in fact it inherits its Hover color from All Links.

The workaround for this is to set the text color of the button’s Hover state to “#fffffe”, which is white enough to not be noticeable.

I suggest that the best fix here is to create an “All Buttons” style separate from the “All Links” style.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.