Button shrink animation

CSS, Animation · May 24, 2021

Creates a shrink animation on hover.

  • Use an appropriate transition to animate changes to the element.
  • Use the :hover pseudo-class to change the transform to scale(0.8), shrinking the element when the user hovers over it.
Preview
<button class="button-shrink">Submit</button>
.button-shrink {
  color: #65b5f6;
  background-color: transparent;
  border: 1px solid #65b5f6;
  border-radius: 4px;
  padding: 0 16px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.button-shrink:hover {
  transform: scale(0.8);
}

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub or Twitter.

More like this