Webflow is amazing. You can rush and create a fully functional website in a couple of hours, but you can also spend a couple of hours on one single element, setting it and fine tuning it until it's perfect, wether it's a form field, a header background with many layers, a slider's slide... each and every element potentially takes hours to fine tune, in a quest of making everything perfect.

That's what we're doing today with a simple button. Let's make it the best, perfect, ideal button!

Here is a CodePen version of the Perfect Button.

Scroll down the article and click on the Staged Demo button to see the Webflow version of the Perfect Button in action

What makes a good button?

We can list the general qualities a good button must have:

• obviousness — that must be obvious it's a button
• readability — great typography, contrast and breathing spaces
• attractiveness — the look, the shape, the texture must beg for your click. We should be eager to interact with it, curious to hover it, dying to click on it!
• call to action — the copy must be great, engaging, mysterious. It must be a real idea. it should have a subtitle.
• hierarchy — it must be obvious if the button is a primary button, or a secondary one, if it's active, inactive or disabled.
• context — it must finds its place within the page design, using the colors of the style guide, and the visual language of the site.
• decoration — it must be nice to the eye. Fonts and icons must be well chosen, work as a pair.
• accessibility — form and function must be well defined
• predictability — it's a button, it must work like a button
• surprising and fun — good taste humor is always a win. Nice hidden behavior and graphics are always bringing a smile.
• multimedia — as long as they remain subtle, a behavior using audio can be a good thing

From there, we can list technical specifications

• Bright flat colors for the primary buttons, hollow style for the secondary button and gray for the disabled. A standard block shape with corners slightly cut.
• A semibold of fat typeface, like Montserrat, for the title, a thin and very readable one for the subtitle/slogan, like Proxima Nova Thin. A discreet text shadow to ensure the best readability. A size of a minimum of 12pt for the title and 8pt for the subtitle. A button that still works if the text inside goes on to take multiple lines.
• A nice icon on the button, a nice color, like one from a Material Design palette. A very subtle gradient with the lighter color on the top.
• A real, complete idea as the button text.
• A 'alt' attribute well written
• Normal, hover and pressed state. A pressed state that actually feels like we're pressing on something. It's a button, not a link. If we stay clicked, it should stayed pressed. There should be events for you to feel when you click and release the click.
• It must not be selectable like any text . It's a piece of UI, not a piece of content.
• It must have a great, fine tuned hover and hover out interactions, for people to want to play with it.
• It can have sound. We can add sound. We're going to add sound!

Now, let's break all that down to Webflow, HTML5 and Javascript and build our button.

The Webflow part: everything except audio.

The code & structure

Only one <a> element with a span.

Multiple backgrounds and background animation

To achieve this, you can read this article on how to achieve background animation. It's quite simple with Webflow.

Here we used an icon that we spread in two part, in order to build a little animation. The mouse icon gets the connection on hover, and seem to send data when we press the button. The setup looks like this:

Fonts and colors

We used Montserrat and Proxima Nova, two very readable fonts. The subtitle is slightly transparent so our eyes can still easily read the title.

Shape and visual characteristics

3 px radius for corners, just to break the shape a little. And a large padding around the text and icons.

Designing the states

Defining the transitions

We need transitions on background position and color, but also transform and opacity. All at 200ms except for the transform, at 50ms.

The Hover state

Switch to the Hover state, adjust the background color and position.

The Active state

Do the same for the Pressed (Active) state

On the active state we have added a negative scale on Transform, for the clicked/pressed effect.

The custom code part: selectability and sound

Selectability

A button is a piece of UI. If users perfom click drags, or cmd/ctrl+A, we don't want the button to be selected. It's not a piece of content. It should look and feel solid.

To address that, we paste some line of custom code preventing the element to be selectable on all browsers and iOS.

The code to make the element unselectable

.the-perfect-button {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
}

Adding sound to a Webflow element using HTML5 and Javascript

There are 4 events we can address for adding sound to a button:

1. the hover-in event
2. the hover-out event
3. the click-down
4. the click-up

We going to use classic clicks for the click events and loud "swooshes" for the hover in and out.

The HTML5 part

We need to use the new HTML5 multimedia <audio> tag. Le'ts use a Custom Code widget to add them in the page along the button.

Write down the IDs you're using, we're going to use them in the javascript code.

The Javascript

The sound is going to be triggered by Javascript. Here's the script that we paste at page level. Get the full script on Codepen.

Basically, there are 5 variables: one for each sound and one for the trigger. The trigger is set on the class of our button (on line 10).

That's it, we now have a fully functional, fine tuned, elaborate button! It's engaging, fun to play with and has a nice woosh sound on hover.

Once again, the Codepen is there for you to decompose how it's made.

‍

‍

‍