10 Animated CSS Buttons

01.typewriter {02  min-width: 8.5rem;03  border: 0.125rem solid #9b4bd0;04  border-radius: 0.65rem;05  background: transparent;06  padding: 0.8rem 1.25rem;07}08 09.typewriter span { position: relative; }10 11.typewriter:hover span { color: transparent; }12 13.typewriter:hover span::after {14  content: attr(data-hover);15  position: absolute;16  inset: 0 auto auto 0;17  width: 0;18  overflow: hidden;19  color: #a43caf;20  border-right: 0.12rem solid currentColor;21  white-space: nowrap;22  animation: type 0.7s steps(6) forwards;23}24 25@keyframes type { to { width: 6ch; } }