I would like to create this kind of loading effect on a styled Link(i.e a button). Although i see this in most websites/apps when an element loads, but I'll like to make it just a decoration on a styled link, so that it attracts visitor to click on the button rather than others.
I've put in all efforts to make this possible but to no avail.
.styledlink {
border: .1px solid green;
padding: 5px;
font-size: 14px;
color: #fff;
text-decoration: none;
border-radius: 4px;
background-color: green;
}
<a class="styledlink" href="https://google.com">Click here</a>
.styled-link {
display: block;
width: 500px;
height: 300px;
border: 0.1px solid silver;
padding: 5px;
font-size: 48px;
font-family: Arial;
color: #fff;
text-decoration: none;
border-radius: 4px;
background-color: silver;
position: relative;
overflow: hidden;
}
.styled-link::before {
content: '';
position: absolute;
top: 0;
left: -150%;
width: 150%;
height: 100%;
background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
animation: loading 1.5s infinite;
}
@keyframes loading {
0% {
left: -150%;
}
50% {
left: 50%;
}
100% {
left: 150%;
}
}
<a class="styled-link" href="https://google.com">Click here</a>