<p>
		Style 1: Rounded pseudo-elements
</p>
<div class="round">
		<a class="button" href="#">Button</a>
		<a class="button" href="#">Button</a>
		<a class="button" href="#">Button</a>
</div>

<br>
<br>
<p>
		Style 2: SVG stroke
</p>
<div class="svg">
		<a class="button" href="#">
				<svg>
						<rect height="40" width="130" fill="transparent" />
				</svg>
				<span>Button</span>
		</a>
		<a class="button" href="#">
				<svg>
						<rect height="40" width="130" fill="transparent" />
				</svg>
				<span>Button</span>
		</a>
		<a class="button" href="#">
				<svg>
						<rect height="40" width="130" fill="transparent" />
				</svg>
				<span>Button</span>
		</a>
</div>

<p>
		Style 3: Highlight made with pseudo-element
</p>
<div class="highlight">
		<a class="button" href="#">Button</a>
</div>

/* GENERAL STYLES */

body {
		text-align: center;
		background: black;
}

p {
		color: #ddd;
		font-family: Helvetica;
		font-size: 20px;
		margin: 20px 0 0 0;
}

a {
		color: #000;
		text-decoration: none;
		text-transform: uppercase;
		font-family: Helvetica;
}

a,
span {
		font-size: 20px;
}

svg {
		width: 130px;
		height: 40px;
}


/* THE ROUND PSEUDO-ELEMENT HOVER STYLES */
.round,
.svg,
.highlight {
		max-width: 960px;
		margin:0 auto;
}

.round a {
		color: crimson;
}

.round .button {
		display: inline-block;
		width: 130px;
		height: 40px;
		line-height: 40px;
		margin: 20px;
		position: relative;
		overflow: hidden;
		border: 2px solid crimson;
		transition: color .5s;
}

.round .button:before {
		content: "";
		position: absolute;
		z-index: -1;
		background: crimson;
		height: 150px;
		width: 200px;
		border-radius: 50%;
}

.round .button:hover {
		color: #fff;
}

.round .button:nth-child(1):before {
		top: 100%;
		left: 100%;
		transition: all .7s;
}

.round .button:nth-child(1):hover:before {
		top: -30px;
		left: -30px;
}

.round .button:nth-child(2):before {
		left: -30px;
		bottom: 100%;
		transition: all .7s;
}

.round .button:nth-child(2):hover:before {
		bottom: -50px;
}

.round .button:nth-child(3):before {
		top: 0;
		left: -200%;
		transition: all .7s;
}

.round .button:nth-child(3):hover:before {
		top: -30px;
		left: -30px;
}


/* THE SVG HOVER EFFECTS */
.svg .button {
		text-decoration: none;
		color: #fff;
		position: relative;
		display: inline-block;
		width: 130px;
		height: 40px;
		margin: 20px;
		overflow: hidden;
}

.svg .button:nth-child(3) {
		overflow: visible;
		position: relative;
		top: -20px;
}

.svg .button rect {
		position: absolute;
		top: 0;
		left: 0;
		stroke-width: 4px;
		stroke-dashoffset: 400px;
		stroke: olivedrab;
}

.svg .button span {
		color: olivedrab;
		width: 130px;
		height: 40px;
		display: inline-block;
		text-align: center;
		position: absolute;
		left: 0;
		top: 0;
		line-height: 40px;
		transition: all .2s linear;
}

.svg .button span:hover {
		color: #fff;
		background: olivedrab;
		transition: all 1s cubic-bezier(1.25s 0, 1.15, 1, 1);
		transition-delay: .5s;
}

.svg .button:nth-child(1):hover rect {
		animation: draw1 .75s linear forwards;
}

.svg .button:nth-child(2):hover rect {
		animation: draw2 .75s linear forwards;
}

.svg .button:nth-child(3) span {
		border: 3px solid olivedrab;
		transform: scale(1);
		width: 125px;
		height: 35px;
		line-height: 37px;
}

.svg .button:nth-child(3):hover span {
		animation: draw3 .75s linear forwards;
}

@keyframes draw1 {
		0% {
				stroke-dasharray: 300;
				stroke-dashoffset: 700;
				stroke-width: 4px;
		}
		75% {
				stroke-dasharray: 900;
				stroke-width: 1px;
		}
		100% {
				stroke-dasharray: 900;
				stroke-width: 1px;
		}
}

@keyframes draw2 {
		0% {
				stroke-dashoffset: 350;
				stroke-dasharray: 350;
		}
		50% {
				stroke-dashoffset: 600;
				stroke-dasharray: 400;
				stroke-width: 1px;
		}
		100% {
				stroke-dashoffset: 900;
				stroke-dasharray: 400;
				stroke-width: 1px;
		}
}

@keyframes draw3 {
		100% {
				transform: scale(1.35);
		}
}


/* HIGHLIGHT */
.highlight .button {
		display: inline-block;
		color: #fff;
		background: darkred;
		margin: 20px;
		width: 130px;
		height: 40px;
		line-height: 40px;
		border-radius: 10px;
		position: relative;
		overflow: hidden;
}

.highlight .button:before {
		content: "";
		position: absolute;
		top: -30px;
		left: -80px;
		height: 100px;
		width: 70px;
		background: rgba(255, 255, 255, .7);
		transform: rotate(20deg);
}

.highlight .button:hover:before {
		left: 150px;
		transition: all .5s;
}
.highlight {margin-bottom:100px;}