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
We can list the general qualities a good button must have:
From there, we can list technical specifications
Only one <a> element with a span.
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:
We used Montserrat and Proxima Nova, two very readable fonts. The subtitle is slightly transparent so our eyes can still easily read the title.
3 px radius for corners, just to break the shape a little. And a large padding around the text and icons.
We need transitions on background position and color, but also transform and opacity. All at 200ms except for the transform, at 50ms.
Switch to the Hover state, adjust the background color and position.
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.
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.
-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 */
There are 4 events we can address for adding sound to a button:
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.
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.