Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 31, 2024 at 9:16 pm #1447216
    craig374

    I have placed a Custom HTML Widget in the first column of my site’s footer. I did this in order to create a Call to Action Button, which I did and have successfully created a link; so the button is operational.

    My question is with regard to what code do I need to include to change the color of the button as well as the color of the text in the hover state.

    I would like the color of the button to be the same red as in the header and in the hero section of my home page. Also, I would like to round the corners of the button a bit. What code do I need to include in the Custom HTML widget to change the color of the button; change the color of the button font when in the hover state; and round the corners of the button? If there is a different or more preferred way to accomplish my goal, please let me know.

    Link to the home page is below.

    June 1, 2024 at 11:21 am #1447261
    Rikard

    Hey craig374,

    Please try the following in Quick CSS under Enfold->General Styling:

    #custom_html-2 button {
  background-color: var(--enfold-header-color-primary);
  color: var(--enfold-header-color-constant-font);
  border-radius: 3px;
}

#custom_html-2 button:hover {
  color: #000;
}

    Best regards,
    Rikard

    June 3, 2024 at 9:10 pm #1447599
    craig374

    Excellent! Worked like a charm. Thank you.

    Quick follow up question: How do I make the text of the button appear black in color in the hover mode?

    June 4, 2024 at 5:03 am #1447614
    Ismael

    Hi,

    Thank you for the update.

    Please include this css code to adjust the color of the button text on hover:

    #custom_html-2 button:hover a {
    color: #000000;
}

    Best regards,
    Ismael

    June 4, 2024 at 6:35 am #1447650
    craig374

    Perfect. That worked! I got what I needed. You can close the thread. Thank you.

    June 4, 2024 at 8:53 am #1447706
    Rikard

    Hi,

    Thanks for the update. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Custom HTML Widget in Footer to Create a CTA Buttom’ is closed to new replies.