Begginer
1 MIN

Animate a button with a Custom State

In this very first episode of Tips & Tutos, we will see how to animate a button through the intelligent use of a Custom State.
Illustration Tips & Tutos Emvpee - Animate button Custom State
Clement Ballion, expert Bubble.io & No code
Clément Ballion
Emvpee Founder & Bubble.io Expert.
Logo LinkedinPhone iconeMail icone

Custom States are temporary variables that allow us to create visual elements in our applications without having to make changes to the database.

In this episode of Tips & Tutorials, we will see discover the simplest way to use a Custom State: Animating a button.

Also to discover: How to swap between interfaces with a Custom State

1️⃣ Step 1: Create the Custom State

→ Click on the button > Create a Custom State > Type Yes/No (Default value: NO)

Custom State creation capture

1️⃣ 2️⃣ Step 2: Create a conditional on the button to change the visual (when Custom State changes to YES).

When This Button's Custom State is YES
→ Change the label and color.

Conditional capture Button

3️⃣ Step 3: Edit the button workflow

When This Button Is Clicked :

1. Set State of an Element > the button > Custom State > YES
2. Add a pause (1500 ms)
3. Set State of an Element > the button > Custom State > NO
4. Perform the action (create product in this tutorial)

Workflow creation capture - Custom State

EMVPEE Banner

A project in mind?

We help you develop your Bubble.io application within 4 weeks.

  • 100% Customized design
  • API Integrations
  • Performance Optimisation
  • Training & Videos

Our latest Tips & Tutos

Find our latest Tips & Tutorials on Bubble and don't miss the next ones!

All Tips & Tutorials