• Resolved jlanpheer

    (@jlanpheer)


    I’m somewhat new to this and am working with the Astra Pro theme and need some help understanding how to set a custom hover color for a button. I have a page with three buttons on it (i’m on localhost or i would share the link), i’ve only consciously attempted to configure the hover color of one and all three buttons do something different. I’m using the Gutenberg editor, WP 6.1, using both Chrome and Safari browsers.

    For the one button that i am attempting to configure, i (a) click on the button in question, (b) under the ‘Block’ settings in the navigator, it says i’m looking at a ‘Button’, soi go to ‘Additional CSS Class(es) and add my class “hover-blue”. Then, i go to the Astra theme’s ‘Customize CSS’ and i’ve added the following code:

    .hover-blue:hover,
    .hover-blue:focus {
    background-color:#BFF4FF!important;
    transition-duration:1.5s;
    }

    When i load the page, the BLOCK that contains the button changes color but the button itself does not change color at all. Indeed, when i inspect the element, the desired class is on the ‘wp-block-button’ class and not the desired ‘wp-block-button__link’ anchor tag. For the life of me, i cannot figure out how to attach my class directly to the tag with the class of ‘wp-block-button__link’. I seem to only be able to attach it to the button block.

    Perhaps even more troubling is the fact that i have two other buttons on this page which i have not attempted to configure at all (i’ve assigned them no custom CSS classes) which DO change color when you hover over them, both change to the same color, in one situation it works, in another it doesn’t, but when i inspect the element, i see no CSS class that i have control over that would allow me to change the color.

    Can anyone please explain to me how to i can assign a custom CSS class directly to a button rather than the button block that surrounds it? If anyone can explain other possible ways that hover behavior could be controlled, i would appreciate that. Is there a setting in the Astra theme somewhere that might be controlling this behavior? I am trying NOT to use Elementor, i’m trying to keep this site lean and lightweight.

    thank you!

    jim.

Viewing 1 replies (of 1 total)
  • Thread Starter jlanpheer

    (@jlanpheer)

    Please disregard. I thought the behavior had something to do with the theme settings somehow, but i found later that adding a couple of plugins allowed me to customize the behavior as i needed.

Viewing 1 replies (of 1 total)
  • The topic ‘Help understanding setting up hover colors for buttons’ is closed to new replies.