К http://shpargalkablog.ru/2013/11/gradient-text.html

by NMitra

HTML

<a href="#" class="raz4">красивые текстовые ссылки</a>

CSS

body {
  padding: 1em;
  background: #1d2025;
}
.raz4 {
  padding: .5em;
  text-decoration: none;
  color: #fff;
  background: no-repeat;
  background-image: linear-gradient(red, red), linear-gradient(red, red), linear-gradient(red, red), linear-gradient(red, red);
  background-size: 2px 0, 2px 0, 0 2px, 0 2px;
  background-position: 0 50%, 100% 50%, 50% 0, 50% 100%;
}
.raz4:active {
  background: #ccc;
}
.raz4:hover {
  transition: .7s;
  background-size: 2px 100%, 2px 100%, 100% 2px, 100% 2px;
}