Can I customize the look & feel of the "See MENU & Order" button?
Yes, you can.
The button's current look and feel is given by class="glf-button". In this class we have defined the properties that make it look orange, have the font white and so on. So you can change the button style in two ways:
- replacing the glf-button class with your own button class, or
- using inline style to change some of the CSS properties
Here are some properties you can use inside the style attribute:
- Background-color - Sets the button color.
- Color - Sets the text color. Make sure you add "!important" for this to work.
- Font-size - Sets the text color. Make sure you add "!important" for this to work.
- Padding - Sets the space around the text.
- Border-radius - Sets the shape of the border. The higher the value, the more rounded the corners.
| Example | Result |
|---|---|
| style="background-color: #008F00" | |
| style="color:#194719 !important" | |
| style="font-size:16px" | |
| style="padding:15px" | |
| style="border-radius:40px" |
Insert the properties you need to get to your desired style. This code, for example:
<span class="glf-button" data-glf-cuid="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" data-glf-ruid="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" style="padding:15px; font-size: 16px; border-radius:40px; background-color:#008F00"> See MENU & Order</span> <script src="https://www.foodbooking.com/widget/js/ewm2.js" defer async ></script>
produces the following result:
Tip
Get more advice on how to handle the ordering button from our How-To section.