Add :hover effect (change background color) to custom button

  • Unknown's avatar
    emilybuenting · Member ·

    I have a button that I’d like to customize differently than what I’ve set the global buttons. I added the button and modified it but there is no option for editing the hover color of the button so I am trying to write additional CSS for it.

    I set up a new class for the button

    Custom-Button-Orange-to-Purple
    but when I try to add the additional styling to this element (I did try and set up the class without the :hover and that didn’t work either).

    .`Custom-Button-Orange-to-Purple:hover {
    background-color:#8601AF !important;
    border-color:none !important;
    }`
    The button I’m trying to modify is the orange one at the bottom of the page here: Kidz Haven Daycare . The code changes the border of the button to purple which I don’t want.

    I’m new to adding custom CSS (obviously) and would be grateful for some help!

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

  • Unknown's avatar
    helper-heroponriki · Member ·

    Hi there!

    We’re limited to what we can help with on CSS questions. However, I’ll get you pointed in the right direction to get started.

    It looks like your site is still “coming soon,” so we can’t see the button in question.

    However, did you assign the class to the button in the editor? Selecting the button block, there’s the “Advanced” section of the block options – if you click to expand that, you should have a section to add “Additional CSS Class(es).” Try adding Custom-Button-Orange-to-Purple there and see if that helps.

    Otherwise, you could try and contact live chat support and while they can’t help with CSS customizations, you could ask their help about what class you need to select to affect that button and they may be able to help.

    I hope that helps you get started!

  • The topic ‘Add :hover effect (change background color) to custom button’ is closed to new replies.