<div class="circle-border">
  <div class="circle">
    <h1>Personal Training</h1>
    <p>Become the best version of YOU.</p>
  </div>
</div>

$border-color: yellow;

body {
  background-color: gray;
  text-align: center;
}

h1, p {
  color: white;
}

.circle-border {
  width: 300px;
  height: 300px;
  border-radius: 100%;
  padding: 30px;
  background-color: black;
}

.circle {
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  
  background: none;
  border: 0;
  box-sizing: border-box;
  
  // Using inset box-shadow instead of border for sizing simplicity
  border-radius: 100%;
  font-size: inherit;
  font-weight: 700;

  // Required, since we're setting absolute on pseudo-elements
  position: relative;
  vertical-align: middle;

  &::before,
  &::after {
    box-sizing: inherit;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
     border-radius: 100%;
  }
  
  &:hover {
    color: $border-color;
  }

  &::before,
  &::after {
    top: 0;
    left: 0;
  }

  &::before {
    border: 2px solid transparent; // We're animating border-color again
  }

  &:hover::before {
    border-top-color: $border-color; // Show borders
    border-right-color: $border-color;
    border-bottom-color: $border-color;

    transition:
      border-top-color 0.15s linear, // Stagger border appearances
      border-right-color 0.15s linear 0.10s,
      border-bottom-color 0.15s linear 0.20s;
  }

  &::after {
    border: 0 solid transparent; // Makes border thinner at the edges? I forgot what I was doing
  }

  &:hover::after {
    border-top: 2px solid $border-color; // Shows border
    border-left-width: 2px; // Solid edges, invisible borders
    border-right-width: 2px; // Solid edges, invisible borders
    transform: rotate(270deg); // Rotate around circle
    transition:
      transform 0.4s linear 0s,
      border-left-width 0s linear 0.35s; // Solid edge post-rotation
  }
}