style.css

body{
		margin: 0;
		padding: 0;
		font-family: sans-serif;
		background:#000;
		}
		.box{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			width: 300px;
			height: 300px;
			box-sizing: border-box;
			cursor: pointer;
		}
		.box:before{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height:100%;
			border: none;
			border-top: 4px solid #58c747;
			border-bottom: 4px solid #58c747;
			box-sizing: border-box;
			transform: scaleX(0);
			transition: 0.5s;
		}
		.box:hover:before{
            transform: scaleX(1);
            transition-delay: 0.5s;
		}
		.box:after{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height:100%;
			border: none;
			border-left: 4px solid #58c747;
			border-right: 4px solid #58c747;
			box-sizing: border-box;
			transform: scaleY(0);
			transition: 0.5s;
		}
		.box:hover:after{
            transform: scaleY(1);
             
		}
		.box h1{
			margin: 0;
			padding:0;
			color:#fff;
			position: absolute;
			top: 50%;
		    transform:translateY(-50%);
			width: 100%;
			text-align: center;
			font-size: 35px;
			z-index: 1;
          }
           .box h1 span{
          	font-size: 40px;
          	display: block;
          	color: #58c747;
          }
          .box span.border
          {
          	position: absolute;
          	width: 100%;
          	height: 100%;
          	display: block;
          	transform: rotate(45deg);
          	box-sizing: border-box;
          	pointer-events: none;
          
          }

          .box span.border:before{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height:100%;
			border: none;
			border-top: 4px solid #58c747;
			border-bottom: 4px solid #58c747;
			box-sizing: border-box;
			transform: scaleX(0);
			transition: 0.5s;
		}
		.box:hover span.border:before{
            transform: scaleX(1);
             transition-delay: 1s;
		}
		.box span.border:after{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height:100%;
			border: none;
			border-left: 4px solid #58c747;
			border-right: 4px solid #58c747;
			box-sizing: border-box;
			transform: scaleY(0);
			transition: 0.5s;
		}
		.box:hover span.border:after{
            transform: scaleY(1);
             transition-delay: 1.5s;
		}