JSFiddle - React, Tailwind, and code Playground

by Sub Lines

HTML

<a class="button">Speichern</a>

<a class="button button--loading">Speichern</a>

CSS

body {
  height: 100vh;
  font-family: sans-serif;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.button {
  position: relative;
  margin: 0 50px;
  
  background-color: #e05300;
  color: #fff;
  padding: 14px 24px;
  border-radius: 2rem;
  line-height: 1;
  
  transition: background 0.2s ease;
}
.button:hover {
  background: #C24800;
}

.button:active {
  transform: translateY(1px);
}

.button.button--loading {
  background-image: linear-gradient(to right, transparent 0%, transparent 33.3%, #FFA774 33.3%, #FFA774 66.6%, transparent 66.6%, transparent 100%);
  background-repeat: repeat-x;
  background-blend-mode: luminosity;
  background-size: 300% 3px;
  background-position: 0 100%;
  animation: pulse 1.5s infinite cubic-bezier(0.91, 0.29, 0.3, 0.73);
}

@keyframes pulse {
  0% {
    background-position: 0 100%;
  }
  50% {
    background-position: -100% 100%;
  }
  100% {
    background-position: -150% 100%;
  }
}