<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;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.