Style "read more" more like a button

style.css

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.more-link { 	/* Add this line to existing button class */
	background: none;
	border: 1px solid #de6c67;
	color: #de6c67;
	cursor: pointer;
	display: block;
	font-size: 16px;
	font-weight: 400;
	margin: 0 auto;
	padding: 10px 20px;
	text-transform: uppercase;
	width: auto;
}

button:hover,
input:hover[type="button"],
input:hover[type="reset"],
input:hover[type="submit"],
.button:hover,
.more-link:hover {	/* Add this line to existing button class */
	background-color: #de6c67;
	color: #fff;
}

/* Add additional code */

.more-link {
  	display: block;
  	margin: 40px auto 0;
  	text-align: center;
	width: 30%;
}

/* Example responsive styles */

@media only screen and (max-width: 480px) {

	.more-link {
		width: 60%;
	}

}

@media only screen and (max-width: 320px) {

	.more-link {
		width: 80%;
	}

}