.main-link {
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 45px;
  display: inline-block;
  margin-top: 1px;
  border-radius: 5px;
  text-decoration: none;
  text-align: center;
  line-height: 50px;
  max-width: 100%;
  background-image: url("http://mya.termoprodaja.com/img/logotip.png");
  background-repeat: no-repeat;
}

.main-link:after {
  content: "";
  position: absolute;
  top: -110%;
  left: -210%;
  width: 110%;
  height: 100%;
  opacity: 0;
  transform: rotate(30deg);
  background: rgba(255, 255, 255, 0.13);
  background: linear-gradient(to right, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.13) 77%, rgba(255, 255, 255, 0.5) 92%, rgba(255, 255, 255, 0) 100%);
}

/* Hover state - trigger effect */
.main-link:hover:after {
  opacity: 1;
  left: 130%;
  transition-property: left, top, opacity;
  transition-duration: 0.7s, 0.7s, 0.15s;
  transition-timing-function: ease;
}

/* Active state */
.main-link:active:after {
  opacity: 0;
}