自分用に一覧化したのがほしくて作ったのでシェアします。
主にゴーストボタンなどのシンプルなボタンデザインのホバーエフェクトとして使われることが多いと思うボーダーアニメーションのサンプルです。
全5種類ですべてCSSのみで実装しているのでボーダーの太さ・カラーなど容易に変更可能です。

4辺それぞれが中央から外に向かって

ホバーすると4辺それぞれに中央から外に向かっていくようにボーダーがひかれるものです。
実装にはHTMLとCSSをそれぞれ下記のように記述します。

<a class="button" href="#">Button</a>
.button {
  position: relative;
  display: inline-block;
  padding: .5em 4em;
  border: 2px solid #fff;
  color: #fff;
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: all .3s;
}
.button::before,
.button::after {
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  z-index: 2;
  content: '';
  transition: all .3s;
}
.button::before {
  border-top: 2px solid #00cec9;
  border-bottom: 2px solid #00cec9;
  transform: scale(0, 1);
}
.button::after {
  border-right: 2px solid #00cec9;
  border-left: 2px solid #00cec9;
  transform: scale(1, 0);
}
.button:hover {
  color: #00cec9;
}
.button:hover::after,
.button:hover::before {
  transform: scale(1);
}

左上から右下に向かって

左上から右下に向かってだんだんボーダーがひかれていくような感じのもので、疑似要素の初期位置を変更したりホバー時のtransitionを調整するなどすれば右上からや右下からもできます。
実装にはHTMLとCSSをそれぞれ下記のように記述します。

<a class="button" href="#">Button</a>
.button {
  position: relative;
  display: inline-block;
  padding: .5em 4em;
  border: 2px solid #fff;
  color: #fff;
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: all .2s;
}
.button::before,
.button::after {
  position: absolute;
  top: -2px;
  left: -2px;
  z-index: 2;
  content: '';
  width: 0;
  height: 0;
  border: 2px solid transparent;
  box-sizing: content-box;
}
.button:hover {
  color: #00cec9;
}
.button:hover::before,
.button:hover::after {
  width: 100%;
  height: 100%;
}
.button:hover::before {
  border-top-color: #00cec9;
  border-right-color: #00cec9;
  transition: width .3s, height .3s .3s;
}
.button:hover::after {
  border-bottom-color: #00cec9;
  border-left-color: #00cec9;
  transition: height .3s, width .3s .3s;
}

左と下・右と上でそれぞれ

左と下・右と上でそれぞれボーダーがひかれるもので、左右と上下のタイミングをそれぞれずらしたものです。
こちらも少し調整をすることで左と上・右と下というように組み合わせを変更したり、サンプルでは左右が先になっているのを上下を先にひくようにしたりできます。
実装にはHTMLとCSSをそれぞれ下記のように記述します。

<a class="button" href="#">Button</a>
.button {
  position: relative;
  display: inline-block;
  padding: .5em 4em;
  border: 2px solid #fff;
  color: #fff;
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: all .2s;
}
.button::before,
.button::after {
  position: absolute;
  z-index: 2;
  content: '';
  width: 0;
  height: 0;
  border: 2px solid transparent;
  box-sizing: content-box;
}
.button::before {
  top: -2px;
  left: -2px;
}
.button::after {
  bottom: -2px;
  right: -2px;
}
.button:hover {
  color: #00cec9;
}
.button:hover::before,
.button:hover::after {
  width: 100%;
  height: 100%;
}
.button:hover::before {
  border-bottom-color: #00cec9;
  border-left-color: #00cec9;
  transition: height .3s, width .3s .3s;
}
.button:hover::after {
  border-top-color: #00cec9;
  border-right-color: #00cec9;
  transition: height .3s, width .3s .3s;
}

左 → 下 → 右 → 上の順に

左 → 下 → 右 → 上と順番にボーダーがひかれていくアニメーションです。
実装にはHTMLとCSSをそれぞれ下記のように記述します。

<a class="button" href="#">Button</a>
.button {
  position: relative;
  display: inline-block;
  padding: .5em 4em;
  border: 2px solid #fff;
  color: #fff;
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: all .2s;
}
.button::before,
.button::after {
  position: absolute;
  z-index: 2;
  content: '';
  width: 0;
  height: 0;
  border: 2px solid transparent;
  box-sizing: content-box;
}
.button::before {
  top: -2px;
  left: -2px;
}
.button::after {
  bottom: -2px;
  right: -2px;
}
.button:hover {
  color: #00cec9;
}
.button:hover::before,
.button:hover::after {
  width: 100%;
  height: 100%;
}
.button:hover::before {
  border-bottom-color: #00cec9;
  border-left-color: #00cec9;
  transition: height .2s, width .2s .2s;
}
.button:hover::after {
  border-top-color: #00cec9;
  border-right-color: #00cec9;
  transition: height .2s .4s, width .2s .6s;
}

4辺のボーダーがすべてバラバラに

4辺のボーダーがすべてバラバラにひかれていく感じのもので、これまでのものに比べると多少手間ですが位置を調整すればサンプルとは違った方向に向けてひくこともできます。
実装にはHTMLとCSSをそれぞれ下記のように記述し、こちらに関してはHTMLはa要素だけでなくspan要素も使用する必要があります。

<a class="button" href="#"><span>Button</span></a>
.button {
  position: relative;
  display: inline-block;
  padding: .5em 4em;
  border: 2px solid #fff;
  color: #fff;
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: all .3s;
}
.button::before,
.button::after,
.button span::before,
.button span::after {
  position: absolute;
  z-index: 2;
  content: '';
  width: 0;
  height: 0;
  border: 2px solid transparent;
  transition: all .3s;
  visibility: hidden;
  box-sizing: content-box;
}
.button::before {
  top: -2px;
  left: -2px;
  border-left-color: #00cec9;
}
.button::after {
  bottom: -2px;
  right: -2px;
  border-right-color: #00cec9;
}
.button span::before {
  bottom: -2px;
  left: -2px;
  border-bottom-color: #00cec9;
}
.button span::after {
  top: -2px;
  right: -2px;
  border-top-color: #00cec9;
}
.button:hover {
  color: #00cec9;
}
.button:hover::before,
.button:hover::after {
  height: 100%;
  visibility: visible;
}
.button:hover span::before,
.button:hover span::after {
  width: 100%;
  visibility: visible;
}