Hyve Digital Button Kit

Save 4+ hours on every Framer project. Professional buttons that just work.

Buy Now — $11.99
Buy Now — $11.99
Buy Now — $11.99

Complete coverage — Brand colors, light/dark backgrounds, all contexts

No more fighting with edge cases

Production-ready — Accessibility, mobile touch, versatile

Keep improving — Free updates with variant and platform updates

The power of a design system. Ready to ship.

The power of a design system. Ready to ship.

7 professional button variants

Bonus glow-up gradient button

Easy, professional animations

Theme customization system

Icon support (library + custom)

Loading state with animation

Stop rebuilding button variants manually

Stop rebuilding button variants manually

Stop rebuilding button variants manually

Stop rebuilding button variants manually

Hyve buttons work different: Change one theme value, update 100+ buttons. Add an icon? Dropdown. Resize for mobile? Toggle sizes in the props panel. This kit is built for designers who are focused on quality and managing their bottom line.

Instance-level

Instance-level

Instance-level

Instance-level

custom SVG icon support

custom SVG icon support

custom SVG icon support

custom SVG icon support

Choose from a library of 20 useful icons or paste in your own SVG paths for leading or trailing positions. The trailing icon can also have a sophisticated, easy-to-add easing animation for a professional polish.

Global Theme Control

Global Theme Control

Do your pro thing to make this button set feel right at home in your design.

Save the theme component at the top of every page (the nav is a great place).

Customize your colors, fonts, and styling.

Voilà! Everything just works.

Theme Panel Settings:

Theme Panel Settings:

Theme Panel Settings:

Theme Panel Settings:

Colors

4 brand colors, 6 greys, 4 destructive, 2 gradient, 1 base, 1 focus ring.

Colors

4 brand colors, 6 greys, 4 destructive, 2 gradient, 1 base, 1 focus ring.

Colors

4 brand colors, 6 greys, 4 destructive, 2 gradient, 1 base, 1 focus ring.

Colors

4 brand colors, 6 greys, 4 destructive, 2 gradient, 1 base, 1 focus ring.

Gradient Button

Color start and end, gradient angle.

Gradient Button

Color start and end, gradient angle.

Gradient Button

Color start and end, gradient angle.

Gradient Button

Color start and end, gradient angle.

Corner Radius

Set from 0 to 9999 or anywhere in between.

Corner Radius

Set from 0 to 9999 or anywhere in between.

Corner Radius

Set from 0 to 9999 or anywhere in between.

Corner Radius

Set from 0 to 9999 or anywhere in between.

Stroke weight

Set from 1 to 100, this weight applies to the secondary and outline buttons and also impacts button states where a outline appears.

Stroke weight

Set from 1 to 100, this weight applies to the secondary and outline buttons and also impacts button states where a outline appears.

Stroke weight

Set from 1 to 100, this weight applies to the secondary and outline buttons and also impacts button states where a outline appears.

Stroke weight

Set from 1 to 100, this weight applies to the secondary and outline buttons and also impacts button states where a outline appears.

Shadow

Use standard CSS format to apply a dropshadow, or leave blank. On press, settings are trimmed in half to create a natural look.

Shadow

Use standard CSS format to apply a dropshadow, or leave blank. On press, settings are trimmed in half to create a natural look.

Shadow

Use standard CSS format to apply a dropshadow, or leave blank. On press, settings are trimmed in half to create a natural look.

Shadow

Use standard CSS format to apply a dropshadow, or leave blank. On press, settings are trimmed in half to create a natural look.

Hover Y

Set a vertical travel distance in pixels for your hover state in desktop.

Hover Y

Set a vertical travel distance in pixels for your hover state in desktop.

Hover Y

Set a vertical travel distance in pixels for your hover state in desktop.

Hover Y

Set a vertical travel distance in pixels for your hover state in desktop.

Tap Scale

Set the scale effect to happen on press.

Tap Scale

Set the scale effect to happen on press.

Tap Scale

Set the scale effect to happen on press.

Tap Scale

Set the scale effect to happen on press.

Trailing Icon Shift

From -8 to +8, a relative distance for your trailing icon to travel. This can be overriden at the instance level.

Trailing Icon Shift

From -8 to +8, a relative distance for your trailing icon to travel. This can be overriden at the instance level.

Trailing Icon Shift

From -8 to +8, a relative distance for your trailing icon to travel. This can be overriden at the instance level.

Trailing Icon Shift

From -8 to +8, a relative distance for your trailing icon to travel. This can be overriden at the instance level.

Font Family

Use standard CSS formatting to list your preferred fonts. Fonts must be availlable in your project to work!

Font Family

Use standard CSS formatting to list your preferred fonts. Fonts must be availlable in your project to work!

Font Family

Use standard CSS formatting to list your preferred fonts. Fonts must be availlable in your project to work!

Font Family

Use standard CSS formatting to list your preferred fonts. Fonts must be availlable in your project to work!

Font Weight

Use standard CSS formatting to list your preferred fonts. Fonts must be availlable in your project to work!

Font Weight

Use standard CSS formatting to list your preferred fonts. Fonts must be availlable in your project to work!

Font Weight

Use standard CSS formatting to list your preferred fonts. Fonts must be availlable in your project to work!

Font Weight

Use standard CSS formatting to list your preferred fonts. Fonts must be availlable in your project to work!

Letter Spacing

Use standard CSS formatting to list your preferred fonts. Fonts must be availlable in your project to work!

Letter Spacing

Use standard CSS formatting to list your preferred fonts. Fonts must be availlable in your project to work!

Letter Spacing

Track your lettering for style or legibility.

Letter Spacing

Use standard CSS formatting to list your preferred fonts. Fonts must be availlable in your project to work!

Text Transform

A global setting to globally apply upper case.

Text Transform

A global setting to globally apply upper case.

Text Transform

A global setting to globally apply upper case.

Text Transform

A global setting to globally apply upper case.

Also! Before we go…yes! There are other important states available within the component, configurable within the instance panel.

Also! Before we go…yes! There are other important states available within the component, configurable within the instance panel.

Hyve Digital Buttons help prevent project sprawl

After handoff (and sometimes, even while in progress) Framer projects have a life of their own. That's where a code-based systemetized button component shines: you get all the speed, design control, and scalability with the confidence of long-term durability.

After handoff (and sometimes, even while in progress) Framer projects have a life of their own. That's where a code-based systemetized button component shines: you get all the speed, design control, and scalability with the confidence of long-term durability.

After handoff (and sometimes, even while in progress) Framer projects have a life of their own. That's where a code-based systemetized button component shines: you get all the speed, design control, and scalability with the confidence of long-term durability.

After handoff (and sometimes, even while in progress) Framer projects have a life of their own. That's where a code-based systemetized button component shines: you get all the speed, design control, and scalability with the confidence of long-term durability.

Buy Online
Buy Online

© 2025 Hyve Digital

LinkedIn

© 2025 Hyve Digital

LinkedIn

© 2025 Hyve Digital

LinkedIn

© 2025 Hyve Digital

LinkedIn