<button class="bn6">Button</button>
body{
  padding:2rem;
  background-image: linear-gradient( 96.5deg,  rgba(39,103,187,1) 10.4%, rgba(16,72,144,1) 87.7% );
}
.bn6 {
  cursor: pointer;
  outline: none;
  border: 2px solid #fff;
  background-color: #023e8a;
  padding: 1.5rem 2.5rem;
  border-radius: 40px;
  font-size: 1.3rem;
  font-weight: 550;
  color: #ffffff;
  background-size: 100% 100%;
}

.bn6:hover {
    background-image: linear-gradient(
    55deg,
    transparent 10%,
    #03045e 10% 20%,
    transparent 20% 30%,
    #03045e 30% 40%,
    transparent 40% 50%,
    #03045e 50% 60%,
    transparent 60% 70%,
    #03045e 70% 80%,
    transparent 80% 90%,
    #03045e 90% 100%
  );
  animation: background 2s linear infinite;
}
@keyframes background {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 500px 0;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.