CodePen Embed - Css transition delay

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Css transition delay</title>
 </head>
 <body>
   <button>I have a small transition delay</button>
 </body>
 </html>

body {
  display: grid;
  place-items: center;
  margin: 0;
  min-height: 100vh;
}

button {
  padding: 0.6rem 1rem 0.7rem 1rem;
  background: hsl(250,50%,50%);
  border: none;
  border-radius: 0.5rem;
  font-size: 1rem;
  color: hsl(0,0%,100%);
  
  transition: background 0.2s 0.1s ease-out;
}

button:hover {
  background: hsl(250,0%,20%);
  color: hsl(0,0%,100%);
}

This Pen is owned by Stephan Nijman on CodePen.

See more by @Since1979 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.