Changing colour of "Book Now" button on listing page

Answered

Follow

Sam Gore

• May 25, 2021 09:06

I have embedded my reservation calendar via iframe and I would like to highlight the "Book Now" (or "réserver") option for each of the product listings as it's not very clear as the main CTA.

https://www.velovite.fr/fr/reservations 

I have checked the other request in this forum, but it looks like their set-up is quite different to mine, they maybe using the "Hero" layout. 

 

0

• 

  Amy, Technical Analyst

  • May 26, 2021 16:27

  Hi Sam,
   
  You can change the colour of the Book Now button by using some CSS similar to this:

  .cf-item-action .cf-btn-book.res-btn.ct {
     background-color: red;
  }
  .cf-item-action .cf-btn-book.res-btn.ct:hover {
     background-color: blue;
  }

   
  With this, the button will appear as red when it is loaded and change to blue on hover. You will want to update the colours to match your branding more closely. Here is an online resource to find your desired colour codes: https://htmlcolorcodes.com/

   
  I hope this helps!
  
  

  0

  Comment actions Permalink

Please sign in to leave a comment.