<div class="course-link-wrapper">
  <a href="#1" class="course-link round-btn-svg">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="50" class="round-btn-svg-shape"></circle>
    </svg>
    <span class="inner-text">
      up
    </span>
  </a>
</div>

* {
  box-sizing: border-box;
}

body {
  background-color: #1d1d1d;
}

.course-link-wrapper {
  margin: 50px;
  display: inline-block;
}

.course-link {
  position: relative;
  background-color: #000;
}

.inner-text {
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  text-transform: uppercase;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
}

.round-btn-svg {
  display: inline-block;
  position: relative;
  border-radius: 50%;
  width: 100px;
  height: 100px;
}

.round-btn-svg svg {
  width: 100px;
  height: 100px;
  overflow: visible;
}


.round-btn-svg:hover .round-btn-svg-shape {
  stroke-dashoffset: 0;
}

.round-btn-svg-shape {
  width: 100px;
  height: 100px;
  stroke-dashoffset: 314;
  stroke-dasharray: 314;
  stroke-width: 2px;
  stroke: #f00;
  fill: transparent;
  border-radius: 50%;
  -webkit-transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
  -o-transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
  transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
}

@media (max-width: 991px) {
  .round-btn-svg,
  .round-btn-svg svg {
    width: 70px;
    height: 70px;
  }
}