Button Element ❺
Interact with Webflow's Button Element
Overview
This feature allows you to work with the Webflow button element.
Enable / disable a button. Disabled buttons cannot be clicked.
Supports disabled-state styling through a special class you choose.
Buttons can load as disabled and be enabled later, or load as enabled and be disabled later.
Future
Currently designed to work specifically with Webflow's Button element.
May support the Form Submit button later.
May support interactions-rebinding for the disabled state.
Demonstration
Check the button demonstration here-
Use Cases
Load a button as disabled, and then enabled it once;
The user has completed certain tasks, to the satisfaction of your custom code
The user has watched a video to completion, or a certain %
A certain amount of time has passed
Setup
Setup your button element.
wfu-button
attribute
wfu-button
attributeAdd the wfu-button
custom attribute to the Button element you want to control Give it a unique name to identify that element uniquely, e.g. button1
.
This makes the button element accessible in code.
Make certain only one button on the page has the assigned name. The name is used to reference it, and in callback notifications.
wfu-button-enabled
attribute
wfu-button-enabled
attributeSet to true
or false
, depending on the initial state you want.
wfu-preload
attribute
wfu-preload
attributeOPTIONAL. Indicates the appearance before the button is initialized. Highly recommended if your initial state is disabled.
hidden
hides the element until initialization is complete.invisible
maintains the space for the element, but the elent does nto appear until initialization is complete.
wfu-button-disabled-class
attribute
wfu-button-disabled-class
attributeOPTIONAL. Allows you to specify a custom class that will be added to the button's class list when disabled, and removed when enabled. This will be in combination with whatever other classes you have already defined.
The best practice here is to create it as a compound class, e.g. is-disabled
, and then style the button the way you want it to appear in disabled state. Change the hover, change the colors, etc.
JavaScript API
To access a button and manipulate it, simply create an instance using the name you've assigned.
Enable / disable button
Set the enabled
property to true
or false
.
Getting Started ( NOCODE )
STEP 1 - Add the Library
First, add the library as detailed in Quick Start.
STEP 2 - Apply the custom attributes to the elements you want to affect
See above for details.
Last updated