CSS Transitions

by hannahtaylor

HTML

<div id="with">With Transition</div>

<div id="without">Without Transition</div>

CSS

#with {
	background-color: #d1603d;
	transition: all 0.5s ease;
	
	width: 150px;
	height: 20px;
	padding: 5px 0 5px 0;
	text-align: center;
	font-family: "arial", sans-serif;
	margin-bottom: 20px;
	cursor: pointer;
}

#with:hover {
	background-color: #ddb967;
}

#without {
	background-color: #d1603d;
	
	width: 150px;
	height: 20px;
	padding: 5px 0 5px 0;
	text-align: center;
	font-family: "arial", sans-serif;
	margin-bottom: 20px;
	cursor: pointer;
}

#without:hover {
	background-color: #ddb967;
}