Kevin Powell - Community•4w ago

How to increase the duration of pseudo classes in CSS?

Hey! I'm looking to increase the duration that a button remains active after being clicked, so the effect doesn't disappear immediately. I've developed an approach that works well with just two states, but I want to ensure that the delay applies only to the active state and not to the others. For instance, I want the hover state to be immediate, without any delay

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style lang="css">
    button {
      all: unset;
      font: inherit;
      color: white;
      user-select: none;
      padding: 0.5rem 1rem;
      border-radius: 0.5rem;
      background-color: red;
      transition-property: background-color;
      transition-delay: 300ms;
      transition-duration: 300ms;
      transition-timing-function: ease-in-out;
    }

    button:active {
      background-color: green;
      transition-duration: 0ms;
      transition-delay: 0ms;
    }
  </style>
</head>
<body>
  <button>Push me</button>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style lang="css">
    button {
      all: unset;
      font: inherit;
      color: white;
      user-select: none;
      padding: 0.5rem 1rem;
      border-radius: 0.5rem;
      background-color: red;
      transition-property: background-color;
      transition-delay: 300ms;
      transition-duration: 300ms;
      transition-timing-function: ease-in-out;
    }

    button:active {
      background-color: green;
      transition-duration: 0ms;
      transition-delay: 0ms;
    }
  </style>
</head>
<body>
  <button>Push me</button>
</body>
</html>

11 Replies

clevermissfox•3w ago

You want delay ON the active state but not on hover? Bc your code suggests the opposite, that you want 0ms delay on active and 300ms delay otherwise.

zobweytOP•3w ago

I want the active state to last longer. My code works well with just two states. If I'd add hover state, it will delay there too

clevermissfox•3w ago

That’s because you’ve added the delay to the button , not button::active so if it’s on the button it will apply to all states unless it’s been overwritten. The active state to last longer is the duration , delay just prevents the transition from starting. Could you please lmk clearly what you want to happen during each state ? Your post and comment has some conflicting information. For example something like: 1. hover state -no transition duration , no delay -immediately on hover bg Color should change to green 2. Active state -implement transition on the box shadow -transition duration should be 500ms -transition should be delayed by 300ms Etc

zobweytOP•3w ago

Yeah, sorry, maybe I was unclear button - some background color - transition duration 300ms, transition delay 0ms button:hover - change background color to a darker one - transition duration 300ms, transition delay 0ms button:active - change the background color to an even darker one - transition duration 0ms - before coming back to the idle state it should have a delay of 300ms (i.e. when you release the mouse button it should wait 300ms before changing from #1122bd to #3446eb), so the active effect doesn't disappear immediately after click Take this code snippet:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style lang="css">
    button {
      all: unset;
      font: inherit;
      color: #fff;
      user-select: none;
      padding: 0.5rem 1rem;
      border-radius: 0.5rem;
      background-color: #3446eb;
      transition-property: background-color;
      transition-delay: 0ms;
      transition-duration: 300ms;
      transition-timing-function: ease-in-out;
    }
    
    button:hover {
      background-color: #2b3dd9;
    }

    button:active {
      transition-duration: 0ms;
      background-color: #1122bd;
    }
  </style>
</head>
<body>
  <button>Push me</button>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style lang="css">
    button {
      all: unset;
      font: inherit;
      color: #fff;
      user-select: none;
      padding: 0.5rem 1rem;
      border-radius: 0.5rem;
      background-color: #3446eb;
      transition-property: background-color;
      transition-delay: 0ms;
      transition-duration: 300ms;
      transition-timing-function: ease-in-out;
    }
    
    button:hover {
      background-color: #2b3dd9;
    }

    button:active {
      transition-duration: 0ms;
      background-color: #1122bd;
    }
  </style>
</head>
<body>
  <button>Push me</button>
</body>
</html>

This one is missing here:

- before coming back to the idle state it should have a delay of 300ms (i.e. when you release the mouse button it should wait 300ms before changing from #1122bd to #3446eb), so the active effect doesn't disappear immediately after click

How do I add this effect?

clevermissfox•3w ago

try something like this for no transition on hover but to hold the active state a bit after click is released (this is my undertsanidn of your goal so if thats incorrect, please post a screen recording of the behaviour youre looking for or try to explain again step by step). I havent tested it as im on mobile but maybe it will get you closer. the --vars are called css variables and can hold values as placeholders, and therefore when you change the value, it

button {
  --duration: 0ms;
  --release-delay: 0ms;
  all: unset;
  font: inherit;
  color: #fff;
  user-select: none;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background-color: #3446eb;
  transition: background-color var(--duration) ease-in-out var(--release-delay);
  
}

button:hover {
  
  background-color: lime;
}



button:active {
/*   --release-delay: 600ms; */
  --duration: 0ms;
  background-color: hotpink;
}

button:not(:active:hover) {
  --release-delay: 300ms; 
  --duration: 0ms;  
}

button {
  --duration: 0ms;
  --release-delay: 0ms;
  all: unset;
  font: inherit;
  color: #fff;
  user-select: none;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background-color: #3446eb;
  transition: background-color var(--duration) ease-in-out var(--release-delay);
  
}

button:hover {
  
  background-color: lime;
}



button:active {
/*   --release-delay: 600ms; */
  --duration: 0ms;
  background-color: hotpink;
}

button:not(:active:hover) {
  --release-delay: 300ms; 
  --duration: 0ms;  
}

or possibly this if the above doesnt work.

button {
  --duration: 0ms;
  --release-delay: 0ms;
  all: unset;
  font: inherit;
  color: #fff;
  user-select: none;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background-color: #3446eb;
  transition: background-color var(--duration) ease-in-out var(--release-delay);
  
}

button:hover {
  background-color: lime;
}

button:active {
  --release-delay: 0ms;
  --duration: 0ms;
  background-color: hotpink;
}

button:hover:focus:not(:hover:active) {
  background-color: hotpink;
  --release-delay: 300ms; 
  --duration: 0ms;  
}

button:active:focus {
  --duration: 300ms; 
  --release-delay: 300ms;
}

button {
  --duration: 0ms;
  --release-delay: 0ms;
  all: unset;
  font: inherit;
  color: #fff;
  user-select: none;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background-color: #3446eb;
  transition: background-color var(--duration) ease-in-out var(--release-delay);
  
}

button:hover {
  background-color: lime;
}

button:active {
  --release-delay: 0ms;
  --duration: 0ms;
  background-color: hotpink;
}

button:hover:focus:not(:hover:active) {
  background-color: hotpink;
  --release-delay: 300ms; 
  --duration: 0ms;  
}

button:active:focus {
  --duration: 300ms; 
  --release-delay: 300ms;
}

zobweytOP•3w ago

I'm trying to achieve similar behavior. As you can see, the active effect doesn't disappear immediately after click, there is a delay before changing from active color to idle color This one also has a delay on hover, and the one with :focus works weird

zobweytOP•3w ago

clevermissfox•3w ago

Ill have to test tmrw when I'm on pc to see what's "weird", but it's a hard one because hover state is before/after active, not active back to idle. Depends how you want it to behave then

zobweytOP•3w ago

This one is actually made with some javascript, but I'm looking if it's possible with CSS only

clevermissfox•3w ago

You could instead use custom properties tobswap the bg color with an animation triggered by :active, so when it's Hover state post active the bg colour stays the sane clr as the active was and then at the end of the animation the Hover state reverts back to its original colour. Javascript would be easiest tbh You def need a button, not a link that looks like a btn ?😆 is this resolved?

zobweytOP•3w ago

Oh, sorry, didn't see the message. I think I'll stick with this one for now:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style lang="css">
    button {
      all: unset;
      font: inherit;
      color: #fff;
      user-select: none;
      padding: 0.5rem 1rem;
      border-radius: 0.5rem;
      background-color: #3446eb;
      transition-property: background-color;
      transition-delay: 0ms;
      transition-duration: 300ms;
      transition-timing-function: ease-in-out;
    }
    
    button:hover {
      background-color: #2b3dd9;
    }

    button:active {
      transition-duration: 0ms;
      background-color: #1122bd;
    }
  </style>
</head>
<body>
  <button>Push me</button>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style lang="css">
    button {
      all: unset;
      font: inherit;
      color: #fff;
      user-select: none;
      padding: 0.5rem 1rem;
      border-radius: 0.5rem;
      background-color: #3446eb;
      transition-property: background-color;
      transition-delay: 0ms;
      transition-duration: 300ms;
      transition-timing-function: ease-in-out;
    }
    
    button:hover {
      background-color: #2b3dd9;
    }

    button:active {
      transition-duration: 0ms;
      background-color: #1122bd;
    }
  </style>
</head>
<body>
  <button>Push me</button>
</body>
</html>

Thank you for the help!

Gaming

Programming

How to increase the duration of pseudo classes in CSS?