JSFiddle - React, Tailwind, and code Playground

by Xenodo

HTML

<html>
<head>
	<title></title>
</head>
<body>
	<div class="borders">Hatdog</div>
	<button> Open </button>
</body>
</html>

CSS

.borders {
		  
		  display: inline-block;
		  padding: 4px;
		}
		.borders:after,
		.borders:before {
		  position: absolute;
		  content: '';
		  height: 0%;
		  width: 0%;
		  
		}

		@keyframes loading_s {
			100% {
				border-top: 2px solid black;
			  	border-left: 2px solid black;
			  	height: calc(100% - 12px);
		 		width: calc(100% - 12px);
			}
		}
		@keyframes loading_ss {
			100% {
				border-right: 2px solid black;
		  		border-bottom: 2px solid black;
			  	height: calc(100% - 12px);
		 		width: calc(100% - 12px);
			}
		}

		.borders:before {
		  left: 10px;
		  top: 10px;
		  border-top: 2px solid transparent;
		  border-left: 2px solid transparent;
		  
		}
		
		.borders:after {
		  bottom: 10px;
		  right: 10px;
		  border-right: 2px solid transparent;
		  border-bottom: 2px solid transparent;
		  
		}

		.borders:before.s {
			animation: loading_s 1s forwards;
		}

		.borders:after.ss {
			animation: loading_ss 1s forwards;
		}

JavaScript

$('button').click(function() {
			$('.borders').toggleClass('s');
      $('.borders').toggleClass('ss');
		})