Custom heading as button – change hover color background & text

This topic has 6 replies, 3 voices, and was last updated 4 years, 7 months ago ago by Rose Tyler

  • Avatar: Annet
    Annet
    Participant
    August 11, 2019 at 14:27

    Hi! To be able to use the custom font I’ve uploaded for my website you’ve advised me to use the custom heading for buttons. I’ve added a background color to the custom heading.

    1. The background color is not clickable, only the text is clickable
    2. I would like to change the background color on hover & the text color on hover

    How the ‘button’ looks now:
    https://prnt.sc/or817j

    5 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 11, 2019 at 14:35

    Hello,

    In this case, you need to use custom CSS code.
    Add a custom class for the Custom heading element, and code like this:

    .my-custom-button a {
        padding: 8px 42px 3px;
    }
    .my-custom-button:hover {
        background-color: #3d635a !important;
        color: black !important;
    }

    Regards

    Avatar: Annet
    Annet
    Participant
    August 13, 2019 at 18:07

    Don’t know why but it’s not working :-S…. The color of the text changes to light grey while i’ve set it to dark grey!
    I did change button to heading, that’s correct right?

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    August 13, 2019 at 20:36

    Hello,

    Check now. We have replaced heading by the button if you want to have bg color clickable.

    Regards

    Avatar: Annet
    Annet
    Participant
    August 14, 2019 at 10:57

    Yes, great!

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 14, 2019 at 11:01

    You’re welcome!

    Regards

  • Viewing 6 results - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.