Button +

Simon Lucas

Button +

Overview

This custom button component was built out of a need to have a few more options, such as:

  • The ability to select your own custom icon from the file browser (to the left or the right of the text)
  • The option to have a linear gradient
  • Options for the shadow style, on hover and when pressed
  • Options for different button states, selectable from a dropdown

How does it work?

Check out the example file here to see how the different button styles have been configured.

I have grouped button options into 3 sections:

  • Typography
  • Style
  • Animation

In Typography, you can edit button text, font, size, weight, text transform and letter spacing.

In Style you can configure whether the button has an icon (left or right of the text - you select an SVG or PNG using the file picker), gradient, border style and thickness, shadow (including different shadow styles for default, on hover and pressed), and button radius.

In Animation you can select the hover and tap scale, as well as the scale and colour animation (taken from the default Framer button).

Notes

  • You can now select different icon colours for each state (uses the mask & webkit mask property)

  • You can now select different states from a dropdown

  • The disabled toggle should now select the disabled style when toggling.

Any questions?

You can find me on the Framer Discord server (search for user: Si)

Contact me

If you would like to contact me, please send me an email: simonlucasltd@gmail.com

Thanks to the Framer team for inspiration (some of the code used here was based on the default Framer button component).

Changelog

1.4 (20th July 2020) - Seventh release. Added text alignment options

1.3 (19th July 2020) - Sixth release. You can now select a different icon colour for each state (uses the mask image property: https://css-tricks.com/almanac/properties/m/mask-image/). I have provided fallbacks for other browsers but please test and let me know if any issues on certain devices.

1.22 (16th July 2020) - Fifth release. Disabled prop was not working as it should. Fixed.

1.21 (14th July 2020) - Fourth release. Scale and colour animations were not working properly. Fixed.

1.2 (9th July 2020) - Third release. Updated to have different states selectable in a dropdown. Selecting the disabled toggle now selects the disabled variant.

1.1 (8th July 2020) - Second release. Updated to have different states selectable in a dropdown

1.0 (1st July 2020) - First release