Support Center Visit Demo License manager Buy @ envato

Change hover state on call to action

increasethewedgeincreasethewedge
in Other
Hi,

I would like to insert a call to action on each page but be able to style the button to match the colour scheme of each page.

Can you assist?

Comments

  • AlbertAlbert
    Hi,

    what assist you need? Where your problem is?
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • increasethewedgeincreasethewedge
    edited February 2016
    On www.meltedhouse.co.uk/new/swedish-massage, the button is grey text with the orange outline and when on hover its white text with orange button.

    On www.meltedhouse.co.uk/new/postural-assessment, I want a green outline and with green text and on hover i want white text with green button.
  • AlbertAlbert
    Ok. So to change the button color on different page, you need to use the following css: 
    .page-id-xxx .button-stroke a.button, .page-id-xxx .button-stroke a.button .button_icon i, .page-id-xxx .button-stroke a.tp-button { border-color: #FFF !important; color: #FFF !important; }
    .page-id-xxx .button-stroke a.button:hover, .page-id-xxx .button-stroke a.tp-button:hover { background-color: #FFF !important; color: #FFF !important; }
    Where xxx is page ID where the button is.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • increasethewedgeincreasethewedge
    Where do I find the Page ID? 
  • increasethewedgeincreasethewedge
    CSS not working posted in both page and custom css options in theme options.

    .page-id-3456 .button-stroke a.button, .page-id-3456 .button-stroke a.button .button_icon i, .page-id-3456 .button-stroke a.tp-button { border-color: #FFF !important; color: #FFF !important; }
    .page-id-3456 .button-stroke a.button:hover, .page-id-3456 .button-stroke a.tp-button:hover { background-color: #FFF !important; color: #FFF !important; }

    I hovered over the edit page on the pages section to get the page id.
  • AlbertAlbert
    Go to Pages > All Pages section, hover on Edit button next to page and you will see the ID in the section where link is.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • increasethewedgeincreasethewedge
    Still doesnt work! Page id 3456 is http://www.rejuvenating.me.uk/sports-therapy
  • AlbertAlbert
    The code we gave you above, does not work because of many html errors you got. Please open your website in Firefox html mode (CTRL+U) and check how many of them you have. Please fix them first and all should be fine.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
Sign In or Register to comment.