<div class="container">
 
 <a class="btn-blue" href=""><span>button</span></a>
  
</div>
// ignore this
// ==============================
.container {
  height: 400px;
  display: -webkit-flex;
	display: flex;

	-webkit-flex-align: center;
	align-items: center;
	justify-content: center;
}

.btn-blue {
	display: inline-block;
	position: relative;
	width: 300px;
	height: 70px;
	font-size: 16px;
	font-weight: bold;
	color: #2594FF;
  text-align: center;
	text-decoration: none;
	text-transform: uppercase;
  

	span {
    display: inline-block;
		position: relative;
		top: 32px; left: 0px;
    height: 60px;
		z-index: 1000;
    transition: transform .3s, color .2s;
	}

	&:before,
	&:after {
		content: '';
		position: absolute;
		
		display: inline-block;
		width: 287px;
		height: 52px;

		border: 4px solid #2594FF;
		border-radius: 50px;

		z-index: -10;
    
	}

	&:before {
		bottom: 0; left: 0;
    transition: transform .3s, background .3s;
	}

	&:after {
		top: 0; left: 10px;
		opacity: 0.2;
    transition: transform .3s, opacity .3s;
	}


	// Hover 

	&:hover {
		span {
			color: #fff;
      transform: translate(5px, -5px);
		}
		&:before {
			background-color: #2594FF;
      transform: translate(5px, -5px);
		}
		&:after {
      transform: translate(-5px, 5px);
			opacity: 0;
		}
	}

	// Active
	&:active {
		&:before {
			background-color: #000;
		}
	}
}






View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.