Button

Getting Started
System Requirements Installation & Update License Key Getting Started Settings
Topbar
Topbar Overview Font Library Keyboard Shortcuts Breakpoints  Canvas Control Page Audit Accessibility Comments  Versions
Pages Panel
Pages Pop-ups Custom Code
Utility Pages
User Registration Page  Social Login
Layers Panel
Layers
Symbols
Symbols
Elements Panel
Elements Overview Container Section Div   Flex Grid  Heading Paragraph List List Item Button Link Block Rich Text Image Video Lottie SVG Form Elements Lightbox Navbar Slider Tabs Map  Code  Collection Element Dropdown Pre-built Library Custom Properties
Form Builder
Form Elements Form Actions Form Data
Media Manager
Media Manager
Templates
Droip Templates
Style Panel
Style Panel Overview  Class Manager Typography Structure  Size Background Borders Shadow Effects Glass Effect Position Transform Transition Color Settings Values and Units Visibility Conditions Spring Transition
Interactions
Interactions Text Animations
Variables
Variables
AI Generator
AI Generator
Dynamic Data Basics
Collection Element Connect Elements To Dynamic Fields Creating Dynamic User Lists and Single User Templates  Filter WordPress Posts Using Collection
Content Manager
Overview  Collections Collection Fields Collection Items Displaying Dynamic Content Collection References Collection Search & Filter
Figma to Droip
Figma to Droip
Collaboration
Role Manager Real-Time Collaboration Comments  Versions
Role Manager
Role Manager
Tutorials
How to Translate a Droip Website With Weglot 
API Integrations
API Integrations 
Getting Started
System Requirements Installation & Update License Key Getting Started Settings
Topbar
Topbar Overview Font Library Keyboard Shortcuts Breakpoints  Canvas Control Page Audit Accessibility Comments  Versions
Pages Panel
Pages Pop-ups Custom Code
Utility Pages
User Registration Page  Social Login
Layers Panel
Layers
Symbols
Symbols
Elements Panel
Elements Overview Container Section Div   Flex Grid  Heading Paragraph List List Item Button Link Block Rich Text Image Video Lottie SVG Form Elements Lightbox Navbar Slider Tabs Map  Code  Collection Element Dropdown Pre-built Library Custom Properties
Form Builder
Form Elements Form Actions Form Data
Media Manager
Media Manager
Templates
Droip Templates
Style Panel
Style Panel Overview  Class Manager Typography Structure  Size Background Borders Shadow Effects Glass Effect Position Transform Transition Color Settings Values and Units Visibility Conditions Spring Transition
Interactions
Interactions Text Animations
Variables
Variables
AI Generator
AI Generator
Dynamic Data Basics
Collection Element Connect Elements To Dynamic Fields Creating Dynamic User Lists and Single User Templates  Filter WordPress Posts Using Collection
Content Manager
Overview  Collections Collection Fields Collection Items Displaying Dynamic Content Collection References Collection Search & Filter
Figma to Droip
Figma to Droip
Collaboration
Role Manager Real-Time Collaboration Comments  Versions
Role Manager
Role Manager
Tutorials
How to Translate a Droip Website With Weglot 
API Integrations
API Integrations 

Button

Buttons are essential elements in web development used to prompt user actions, such as submitting forms, canceling operations, or navigating to different pages. This guide will walk you through how to add and customize buttons using Droip.

Adding a Button

To add a button to your web page, follow these simple steps:

  1. Open the Insert > Elements panel on the left sidebar.
  2. Drag and drop the Button element onto the canvas.

Customizing the Button

With Droip, you have full control over the appearance of your buttons. You can easily customize various properties to match your brand’s identity and engage your users effectively.

Changing Button Text & Font