4 Hover Effects for Buttons using GenerateBlocks Global Styles

One of the awesome things about GenerateBlocks’ effects panel is that you can create some really cool hover effects for your button styles. Below are four button hover effects I personally use in the websites I build—and how to set them up in a global class so you can reuse them over and over again.

Overview: Four Hover Effects

I’ve set up a page with four cards, each representing a different effect:

• Float Up: Button floats upward on hover
• Float Right: Button moves to the right on hover
• Grow: Button enlarges slightly on hover
• Float Icon: An icon floats to the right on hover

Each button uses a global style for padding, typography, and background color. Now we’ll create new global classes to apply these effects.

1. Float Up

Create the Global Style

• Add a new global style: button-float-up
• Choose blank style
• Select the hover and focus selector
• In the Effects panel, add a transform
• Set it to translate the Y Axis -5px (Y-axis = vertical movement)

Add Transition

• Switch to the main selector
• Under Effects, add a transition: 0.35 seconds, ease-in-out

Important: Set Display Property

The button won’t animate unless it has inline-block set:

• Select the main button (not global style)
• Under Layout, choose Inline Block
• Save and preview — now the button floats up on hover

Alternatively, if you don’t want to use Inline Block, you can:

• Set the button’s container to display: flex
• Change flex layout to column
• Set alignment to left

This also enables the hover transform to work properly.

2. Float Right

Create the Global Style

• Add new global style: button-float-right
• Choose blank style
• Under the hover and focus state, add transform
• Set to translate the X Axis 5px (X-axis = horizontal movement)

You’ll see the button move right in the editor preview if it’s wrapped in a flex container.

Add Transition

• Under the main selector
• Under Effects panel, add a transition: 0.35 seconds, ease-in-out

Save, preview, and confirm the smooth float to the right.

3. Grow

Create the Global Style

• Add new global style: button-grow
• Under hover and focus, open Effects
• Choose transform and select scale
• Set scale to 1.05 for a subtle growth

Avoid values like 1.2, which can be too dramatic. I prefer subtle animations that don’t interrupt the user experience.

Add Transition

• Under the main selector
• Effects panel, add transition: 0.35 seconds, ease-in-out

Save and preview. The button now gently grows on hover.

4. Float Icon

Add Icon to Button

Since icons can’t be controlled directly via global style:

• Manually add an icon to the button
• Use a custom SVG
• Set icon location to after text

Create the Global Style

• Add new style: button-float-icon
• Create a new selector by choosing the Hover & Focus option, and adding svg
• Under Effects panel, add a transform, and translate the X Axis 5px.

This targets only the SVG inside the button on hover.

Add Transition to Icon

• Add another selector: svg
• Under Effects, add transition: 0.35 seconds, ease-in-out

Now, when you hover, the icon smoothly floats to the right.

Swapping and Reusing Button Effects

The beauty of using global classes is that they can be reused anywhere. If you want to swap out effects:

• Change the button’s class to grow, float up, etc.
• The button will immediately reflect that effect sitewide

And if you want to change how big the grow is or how far it floats, just edit the global style once, and the update applies to every button using that class.

Final Thoughts

These are four button hover effects you can use with GenerateBlocks. There’s definitely more you can do with the effects panel, but for the sake of design and user experience, it’s best to keep animations subtle. A small touch can elevate the feel of your site without becoming a distraction.