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-

SA5 Video & Button Demo - Vimeo

Demo

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

Add 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

Set to true or false, depending on the initial state you want.

wfu-preload attribute

OPTIONAL. 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

OPTIONAL. 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.

<script>
function enableButton() {

  // Create the Sa5 button, by name
  var btn = window.Sa5.Sa5Button.create("my-button");
  if (btn)
    btn.enabled = true; // Enable it 
  
}
</script>

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.