index.pug

- text = "Start a project"
button(style="--total="+text.split('').length)
  each letter, index in text.split('')
    span(style="--nth:"+index,data-letter=letter) !{letter}

style.css

:root {
  --spacing-top-bottom: 3px
}

body * {
  all: unset;
}

body {
  align-items: center;
  background: #000;
  color: #fff;
  display: flex;
  font-family: sans-serif;
  height: 100dvh;
  justify-content: center;
}

button {
  border: solid 1px #fff;
  border-radius: 2rem;
  font-size: 3rem;
  padding: 1rem 2rem;
  text-transform: uppercase;
  transition: scale .5s ease-in-out;

  & span {
    display: inline-block;
    color: transparent;
    padding: var(--spacing-top-bottom) 0;
    position: relative;
    
    &::before,
    &::after {
      color: #fff;
      content: attr(data-letter);
      left: 0;
      position: absolute;
      transition: all 200ms ease-in-out;
    }
    
    &::before {
      scale: 100% 100%;
      top: var(--spacing-top-bottom);
      transition-delay: calc(var(--nth) * 50ms + 100ms);
      transition-property: bottom, scale, top;
    }
    
    &::after {
      bottom: -1rem;
      scale: 100% 0%;
      transition-delay: calc(var(--nth) * 50ms + 100ms);
      transition-property: bottom, scale, top;
    }
  }
  
  &:hover {
    scale: 1.2;

    & span {
      &::before {
        scale: 100% 0%;
        top: -1rem;
      }
      &::after {
        bottom: var(--spacing-top-bottom);
        scale: 100% 100%;
      }
    }
  }
}