<button class="button">This is a button</button>
.button {
	background-color: transparent;
	border: 1px solid black;
	border-radius: 5px;
	margin: 1rem;
	padding: 1rem;
	transition: background-color 0.3s ease, border-color 0.3s ease-in;

	&:hover,
	&:focus {
		background-color: red;
		border-color: red;
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.