"Select Buttons" button disappears

• 

  tdubli1 · Member · Nov 11, 2021 at 5:09 pm

  • Copy link
  • Add topic to favorites

  On my homepage there is button labeled “Contact”. The button works, but once I return to the homepage after clicking on it, it is no longer visible. If I hover my mouse over the location of the button, it becomes visible (and for some reason the outline of the button is now green). This is using the “Exford” template.

  Thanks

  The blog I need help with is: (visible only to logged in users)

• 

  mohammadriyad · Member · Nov 11, 2021 at 7:20 pm

  • Copy link

  Hi,
  Its little tricky. It seems to be like the button you are using has background set in white color. To make it visible, please open your homepage in editor. Select the button block labeled “Contact”. Then on the right side settings bar you will see “color” tab.
  Choose the text color to black and clear the background color(which is selected white) . See Screenshot Don’t forget to update the page and clear your browser cache after that. :)
  Hope it will solve your problem.

  Let us know if you have any query.
  THanks

• 

  kokkieh · Staff · Nov 12, 2021 at 7:31 am

  • Copy link

  Hi there,

  This will happen with your other buttons as well, once you add links to them. It’s not related to your button color settings in this case, but to the colors your theme has specified in the stylesheet for visited links, and on link hover. The button color settings in the editor doesn’t apply to those.

  This code should prevent the disappearing act:

  /* override the "visited" and "active" link color for buttons */
  .wp-block-button.is-style-outline .wp-block-button__link:active, .wp-block-button.is-style-outline .wp-block-button__link:visited {
    color: black;
  }

  This code changes the hover color to the shade of red you’re using in the site title:

  /* change "hover" color for button links */
  .wp-block-button.is-style-outline .wp-block-button__link:hover {
    color: #ff1417;
  }

  And this adjusts the color change that happens when you click on a button (currently the entire button turns green at the moment you click. This code will make the button turn red and the text black):

  /* Change "focus" color scheme for button links */
  .wp-block-button.is-style-outline .wp-block-button__link:focus {
    background-color: #ff1417;
    color: black;
  }

  You can change those color values to whatever you prefer, of course :)