Add style to button
You can add custom styles to every button. Styling options for a button include customizing the label, adding color to the button and the text inside it, and specifying margin dimensions around the button.
To add style to a button in your page,
- Edit your app.
- Select the required page from the accordion menu on the top-left corner, or from the application preview in the middle. You'll be taken to its Design page.
-
Click on the device icon to navigate to the Design view of the device of your choice.
- Hover in the middle and click Open Page Builder .
- Click to select a panel that holds the button you want to customize.
- Click the Configure option in the toolbar in the header area of the page builder. The Panel configuration pane slides in.
- Select Style from the configuration options on the right.
-
Choose from the style options:
- Button type : Select the button shape as rectangular or rounded .
- Change font for button label: Click the Font family dropdown to select a font style.
- Set text style for button label: Click the B , I or U icon to Bold , Italicise and Underline respectively. You can also change the button text to uppercase by clicking the change to uppercase icon.
-
Change font and button color :
- Click the font color picker icon to select a font color.
- Click the color palette icon to select a button color.
- Set font size : Specify the required font size or choose one from the dropdown.
- Set margin for button : Specify a margin in pixels for all four sides of the button.
- You can preview the changes and close the configuration sheet. The changes will be auto saved.
Related Topics
Access your files securely from anywhere
Zoho CRM Training Programs
Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.
Zoho DataPrep Personalized Demo
If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.
- Zoho Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
New to Zoho Writer?
Create. Review. Publish.
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.
New to Zoho Survey?
Zoho Sheet Resources
Zoho Forms Resources
New to Zoho Sign?
Zoho Sign Resources
Sign, Paperless!
New to Zoho TeamInbox?
Zoho TeamInbox Resources
New to Zoho ZeptoMail?
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
New to Bigin?
Related Articles
Adding style to chart
The Style tab allows you to add customization to the charts by applying different chart themes , setting legend position and adding a background color . You can also change the chart type from the slider pane on the left. Apply style to a chart ...Add a button
Buttons can be included in pages to link related application components, such as a form or report, or to simply execute a pre-defined custom function on the click of a button. Each button, by default is embedded in a panel. The following are the ...Add style to image in a panel
Modify the image or icon used in a panel to change its shape, color, and background color. To add style to an image in a panel Double click the panel to add style to the image in it or single click to select the panel and then click the Configure ...Add style to panel
You can add custom styles to every panel. Styling options for a panel include adding background color and panel content alignment. To add style to a panel Click to select a panel that you want to customize. Click the Configure option in the toolbar ...Add style to gauge
Set color for the gauge elements Add style to the gauge elements Set color for the gauge elements Edit your app. Select the required page from the accordion menu on the top-left corner, or from the application preview in the middle. You'll be taken ...
New to Zoho LandingPage?
Zoho LandingPage Resources