Add custom CSS to your Book Now Button
This tutorial is meant for those HTML/WordPress users who are looking to customize their Book Now Buttons even more than the text, text-color and background-color changes that are available within the Orioly application.
To customize a Booking Now Button, follow the instructions below:
Step 1. Get the standard HTML code for your button.
- Sign in to your Orioly account .
- Access the Widgets & Plugins section .
- Click Generate button.
- Choose the activity for which you would like to generate a Book Now Button.
- Click Copy HTML to clipboard.
Step 2. Open up your .html file (e.g. example.html) for which you want to add the Book Now button and paste the previously copied button code into it.
Step 3. To remove the predefined styles of the Book Now button, you need to add the data-button-do-not-style attribute to each of the buttons you want to add the custom CSS.
Step 4. This step is optional but recommended, and it consists of removing the inline CSS from the button code so you can add those styles within your .css file ( e.g. example.css).
Step 5. Once you have gone over all the previous steps you can move to your .css file and add your custom parameters for your Book Now buttons.
You are done. Your Book Now buttons will now have your custom CSS, which will help you match the buttons to the design of your website.
Now that your Booking Now Button is customized and ready to be used, take a look at How to manage your bookings and make the most of your Orioly application.