How do I create this loading effect on a styled link?

Question

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.

Link To Example

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>

Answer 1

.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>