body {
	margin: 0;
	padding: 0;
	background: #dcd5d5;
}
/*Одна ссылка и два span, решили обойтись даже без div-а. Сначала стилизуем гиперссылку, 
из которой и будет состоять наша кнопка.*/
a {
	/*Свойство position: absolute в современных браузерах имеет двойное значение - 
	задает позицию элемента относительно окна браузера и указывет на то, 
	что строчный элемент гиперссылку надо отображать как блочный. Если его убрать из кода, 
	то кнопка исчезнет, останется только текст.

Выравниваем кнопку посередине относительно окна браузера.*/
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);

	/*Задаем ширину и высоту кнопки.*/
	width: 250px;
	height: 80px;


	background: #dcd5d5;
	text-align: center;
	text-transform: uppercase;

	/*Это один из способов выравнивания текста по вертикали, можно применять,
	 если известна высота блока и текст занимает одну строчку. 
	 Значение выставляется путем подбора.*/
	line-height: 80px;
	letter-spacing: 4px;
	text-decoration: none;
	border: 2px solid #fff;
	font-family: sans-serif;
	font-size: 200%;
	color: #fff;

	/*И последняя строчка кода в селекторе "a", 
	не даст обеим надписям button выйти за пределы самой кнопки. 
	Все лишнее будет спрятано.*/
	overflow: hidden;
}

/*Код ниже соединяет обе надписи.*/
a span {
	position: absolute; /*нижний span поднялся вверх*/ 
	top: 0;
	left: 0;
	width: 100%; /*выравнивание относительно блока*/
	height: 100%;
	transition: .5s;
}
	
/*	Псевдокласс :nth-child и никакого мошенничества :)
Первый span с псевдоклассом nth-child(1) сдвинет текст button на 100% по горизонтали влево.*/
a span:nth-child(1) {
	transform: translateX(-100%);
	
}

/*Обе надписи стоят на одной линии и заняли свои исходные позиции для hover эффекта, 
который работает тоже на принципе сдвига на заданное число.*/
a:hover span:nth-child(1) {
	transform: translateX(0);
	transition: .5s;
}

/*А второй span с псевдоклассом nth-child(2) оставит текст button на месте.*/
a span:nth-child(2) {
	transform: translateX(0);
}

/*Обе надписи стоят на одной линии и заняли свои исходные позиции для hover эффекта, 
который работает тоже на принципе сдвига на заданное число.*/
a:hover span:nth-child(2) {
	transform: translateX(100%);
	transition: .5s;
}