コード

奥行きを表現するpsespectiveプロパティ、変化に時間経過の概念を持たせるtransitionプロパティ、動きを表現するanimationプロパティ、keyframeのtranstorm:skewは傾斜を設定。

<a class="btn btn01" href=""><div></div><div>Button</div></a>

.btn {
	position: relative;
	display: block;
	width: 200px;
	height: 50px;
	line-height: 50px;
	text-align: center;
}
.btn01 {
	overflow: hidden;
	-webkit-perspective: 200px;
	perspective: 200px;
}
.btn01 div {
	position: absolute;
	box-sizing: border-box;
	width: 200px;
	height: 50px;
	text-align: center;
}
.btn01 div:nth-child(1) {
	border: 1px solid #333;
	background-color: #fff;
}
.btn01 div:nth-child(2) {
	color: #333;
	left: -100px;
	top: 2px;
	width: 400px;
	height: 50px;
}
.btn01:hover div:nth-child(1) {
	-webkit-animation: btn03_bg 0.3s linear;
	-moz-animation: btn03_bg 0.3s linear;
	animation: btn03_bg 0.3s linear;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
.btn01:hover div:nth-child(2) {
	color: #000;
	-webkit-animation: btn03 0.3s linear;
	-moz-animation: btn03 0.3s linear;
	animation: btn03 0.3s linear;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAGCAYAAAAL+1RLAAAAF0lEQVQIW2NkwAIYgWKS6OIgQQxAoUoAE4AAUnD/0ugAAAAASUVORK5CYII=) repeat;
}
@-webkit-keyframes btn03_bg {
    49.00% {
		background-color: #fff;
    }
    50.00% {
		background-color: #000;
    }
    to {
		background-color: #000;
    }
}
@-webkit-keyframes btn03 {
    from {
		color: #000;
		-webkit-transform: skewX(0deg);
		-moz-transform: skewX(0deg);
		transform: skewX(0deg);
    }
    25.00% {
		color: #000;
		-webkit-transform: skewX(80deg);
		-moz-transform: skewX(80deg);
		transform: skewX(80deg);
    }
    75.00% {
		color: #fff;
		-webkit-transform: skewX(-20deg);
		-moz-transform: skewX(-20deg);
		transform: skewX(-20deg);
    }
    90.00% {
		color: #fff;
		-webkit-transform: skewX(0deg);
		-moz-transform: skewX(0deg);
		transform: skewX(0deg);
    }
    to {
		color: #fff;
		-webkit-transform: skewX(0deg);
		-moz-transform: skewX(0deg);
		transform: skewX(0deg);
    }
}
@-moz-keyframes btn03_bg {
    49.00% {
		background-color: #fff;
    }
    50.00% {
		background-color: #000;
    }
    to {
		background-color: #0000
    }
}
@-moz-keyframes btn03 {
    from {

		-webkit-transform: skewX(0deg);
		-moz-transform: skewX(0deg);
		transform: skewX(0deg);
    }
    25.00% {
		color: #000;
		-webkit-transform: skewX(80deg);
		transform: skewX(80deg);
    }
    75.00% {
		color: #fff;
		-webkit-transform: skewX(-20deg);
		-moz-transform: skewX(-20deg);
		transform: skewX(-20deg);
    }
    90.00% {
		color: #fff;
		-webkit-transform: skewX(0deg);
		-moz-transform: skewX(0deg);
		transform: skewX(0deg);
    }
    to {
		color: #fff;
		-webkit-transform: skewX(0deg);
		-moz-transform: skewX(0deg);
		transform: skewX(0deg);
    }
}