JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#">Click the link</a>

CSS

body{
		padding: 100px;
		background: #f6f6f6;
	}


	a{
		display: block;
		width: 200px;
		position: relative;
		background: #fff;
		height: 40px;
		font: 14px/40px Tahoma;
		color: #39adf0;
		text-decoration: none;
		-webkit-transition: 0.2s;
		margin: auto;
		text-align: center;
		position: relative;
	}

	a:after{
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 0;
		height: 1px;
		background: #39adf0;
		-webkit-transition: 0.2s;
		-moz-transition: 0.2s;
		-ms-transition: 0.2s;
		-o-transition: 0.2s;
		transition: 0.2s;

	}

	a:before{
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		width: 1px;
		height: 0;
		background: #39adf0;
		-webkit-transition: 0.2s;
		-moz-transition: 0.2s;
		-ms-transition: 0.2s;
		-o-transition: 0.2s;
		transition: 0.2s;
	}

	a:hover:after{
		width: 100%;
	}

	a:hover:before{
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		width: 1px;
		height: 100%;
		background: #39adf0;
		-webkit-transition: 0.2s;
		-moz-transition: 0.2s;
		-ms-transition: 0.2s;
		-o-transition: 0.2s;
		transition: 0.2s;
	}