Make Hover Button Effect Speed Dependent on Button Size

Store Design
,

Topic summary

A user is implementing a hover effect on website buttons where a color change transitions across the button. The issue is that wider buttons complete the transition in the same fixed time as narrower ones, making the effect appear faster on larger buttons.

Current implementation:

  • Uses CSS with fixed transition timing (.4s ease-out for background-position)
  • Results in inconsistent visual speed across different button widths
  • Example: ‘Add to cart’ button transitions noticeably faster than ‘Send’ button due to width difference

Desired solution:
The user wants the transition speed to be proportional to button width, so all buttons appear to animate at the same visual rate regardless of size.

Response provided:
A community member suggested setting timing individually for each button, but noted this cannot be achieved with a single code snippet for all buttons.

Status: The user is seeking a calculation-based approach for consistent animation speed across all buttons site-wide. The question of whether CSS can dynamically calculate transition duration based on element width remains unresolved.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I am currently working on a hover effect on the buttons on my website and was wondering if it was possible to use the width of the button to determine the time in which the transition takes i.e make it so the transitions is the same speed regardless of whether the button is narrow or wide. Currently the transition looks very fast on wider buttons because the colour change has to travel further in the time. This screen recording (https://go.screenpal.com/watch/cTVjrFneBCV) highlights what I mean - the transition on the ‘add to cart’ button is a lot faster than the ‘send’ button because it’s almost twice the width.

Currently the code is:

.btn {

transition: opacity .6s ease, color .6s ease, background-position .4s ease-out

}

but I want to make it so the code calculates the time based on the width of the button. Is that possible?

Thank you in advance!

Holly

2

Hi @hollypie002

It’s possible to add a new code to set the timing for each button individually, as we cannot set the timing for all buttons with a single code.

I hope this helps

Best,

Daisy

3

Hi Daisy! Thank you for your response. Is it possible to make the button use a calculation to work out the time based on the length of it? I want them to be consistent throughout the website essentially.