Html Question posted in
Some basic documentation can be found here.

Html – Not able to change the color of btn text on hover when using the variations theme

The following CSS changes a btn background color but not the text color. What am I missing? Any help would be greatly appreciated.

  /* Change button color and background on hover */
  .wp-element-button:hover {
    background-color: red;
    color: white;
  }

Here is the HTML that the Variation Theme generates for a btn

<div class="wp-block-button has-custom-font-size is-style-fill mybtn has-small-font-size"><a class="wp-block-button__link has-text-color has-link-color has-border-color wp-element-button" style="border-color:#ff0000;border-style:solid;border-width:2px;border-radius:0px;color:#ff0000;padding-top:5px;padding-right:10px;padding-bottom:5px;padding-left:10px">LEARN MORE</a></div>
Tags:

2

Answers


  1. 0

    Try using the !important flag. Since WP may have default styles, you may want to overwrite them

     .wp-element-button:hover {
    background-color: red !important;
    color: white !important;
  }
    Login or Signup to reply.
  2. 0

    You can try this.
    This basically overrides any default rules created by WordPress

    /* Change button color and background on hover */
.wp-element-button:hover {
    background-color: red !important; /* Use !important to ensure the property overrides any conflicting rules */
    color: white !important;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search