<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400" rel="stylesheet">

<p><a href="http://tiagoalexandrelopes.com/" target="_blank">My website</a></p>

<p class="note">This is cool because you don't need to change the color of the link on :hover. The mix-blend-mode in the ::after will invert it for you.</p>
  background: black;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .1em

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);

  display: block;
  color: white;
  text-decoration: none;
  position: relative;

  content: "";
  background: white;
	mix-blend-mode: exclusion;
  width: calc(100% + 20px);
  height: 0;
  position: absolute;
  bottom: -4px;
  left: -10px;
	transition: all .3s cubic-bezier(0.445, 0.05, 0.55, 0.95);

	height: calc(100% + 8px)

/* The End */

  top: auto;
  bottom: 0;
  color: #ddd;
  font-size: 13px;
  text-transform: none;
  font-weight: 300;
  text-align: center;
  padding: 10px;
  width: 100%;
  max-width: 500px;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.