[Malleys]

<button>Hello</button>
<button>Codepen</button>
<button>Rolling Text</button>
<style>
	html {
		background: #1a1a20;
		font: bold 200% monospace;
	}
	
	button {
		--color: white;
		--hover-color: #f06;
		background: none;
		border: 0;
		padding: 1em 2em;
		box-shadow: inset 0 0 0 3px var(--color);
		color: var(--color);
		position: relative;
		transition: color .25s;
		font: inherit;
	}

	button::before,
	button::after {
		box-sizing: inherit;
		content: '';
		position: absolute;
		border: 3px solid transparent;
		width: 0;
		height: 0;
	}

	button::before {
		top: 0;
		left: 0;
	}

	button::after {
		bottom: 0;
		right: 0;
	}

	button:hover {
		color: var(--hover-color);
	}

	button:hover::before,
	button:hover::after {
		width: 100%;
		height: 100%;
	}

	button:hover::before {
		border-top-color: currentColor;
		border-right-color: currentColor;
		transition:
			width .25s ease-out,
			height .25s ease-out .25s;
	}

	button:hover::after {
		border-bottom-color: currentColor;
		border-left-color: currentColor;
		transition:
			border-color 0s ease-out .5s,
			width .25s ease-out .5s,
			height .25s ease-out .75s;
	}

</style>

Это в ширину и высоту растягиваются псевдо-элементы.