<button class="cp_button05">button</button>

.cp_button05 {
	position: relative;
	z-index: 1;
	width: 160px;
	padding: 1em;
	line-height: 1.4;
	cursor: pointer;
	user-select: none;
	transition: color 0.3s cubic-bezier(0.02,0.01,0.47,1),transform 0.3s cubic-bezier(0.02,0.01,0.47,1);
	vertical-align: bottom;
	color: #ffffff;
	border: none;
	border-width: 0;
	border-color: transparent;
	border-radius: 0;
	background: transparent;
}
.cp_button05:before {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: '';
	transition: box-shadow 0.2s cubic-bezier(0.02,0.01,0.47,1);
	-webkit-transform: skewX(20deg);
	        transform: skewX(20deg);
	background: #26c6da;
}
.cp_button05:after {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	content: '';
	transition: opacity 0.2s cubic-bezier(0.02,0.01,0.47,1),width 0.15s cubic-bezier(0.02,0.01,0.47,1);
	-webkit-transform: skewX(20deg);
	        transform: skewX(20deg);
	opacity: 0;
	background: #1a237e;
}
.cp_button05:hover {
	-webkit-transform: translateX(5px);
	        transform: translateX(5px);
	color: #ffffff;
}
.cp_button05:hover:after {
	width: 5px;
	opacity: 1;
}
.cp_button05:hover:before {
	box-shadow: inset 0 -1px 0 #1a237e, inset 0 1px 0 #1a237e, inset -1px 0 0 #1a237e;
}
.cp_button05:active:before {
	box-shadow: inset 0 -3px 0 #1a237e, inset 0 3px 0 #1a237e, inset -3px 0 0 #1a237e;
}
.cp_button05:focus,
.cp_button05:focus:hover {
	color: #ffffff;
}