Анимированный border

[fenix_63]

Всем привет. Хочу закрасить у блока border при наведении курсора, по аналогии как вот тут сделано:

https://codepen.io/giana/full/yYBpVY/


Вот мой код: https://jsfiddle.net/aum95wto/

А именно самый первый блок Draw.

Пока у меня есть вот такой вот код:

<div class="center">
		<div class="block">
			123
		</div>
	</div>

Стили:

.center{
			width: 80%;
			margin: 0 auto;
		}

		.block{
			width: 100px;
			height: 100px;
			border-color: blue;
			box-shadow: inset 0 0 0 2px blue;
			border: 0;
			transition: color 1s;
			/*animation: left_to_right 0.5s ease-in-out infinite alternate;*/	
		}

		.block:hover{
			border-color: red;
		}

		.block::before{
			top: 0;
    		left: 0;
    		width: 0;
		    height: 0;
			border: 2px solid transparent;
		}

		.block::after{
			bottom: 0;
    		right: 0;

    		width: 0;
		    height: 0;
			border: 2px solid transparent;
		}

		.block:hover::before{
			border-top-color: red;
			border-right-color: red;
			transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
			width: 100%;
			height: 100%;
		}

	
		.block:hover::after{
			border-bottom-color: red;
			border-left-color: red;
			transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
			width: 100%;
			height: 100%;
		}

Но нужного эффекта так и не происходит. Вообще при наводке курсора ничего не происходит. Помогите пожалуйста, что я делаю не так.

P.S. Возможно тут JS-анимация требуется, и CSS будет недостаточно, поэтому и пишу сюда.

[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>

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