.main_div {
 --color: #3992e6;
 position: relative;
 z-index: 1;
}

.main_div::before {
 content: '';
 position: absolute;
 width: 30px;
 height: 30px;
 background: transparent;
 top: -7px;
 left: -7px;
 z-index: -5;
 border-top: 3px solid var(--color);
 border-left: 3px solid var(--color);
 transition: 0.5s;
}

.main_div::after {
 content: '';
 position: absolute;
 width: 30px;
 height: 30px;
 background: transparent;
 bottom: -7px;
 right: -7px;
 z-index: -5;
 border-right: 3px solid var(--color);
 border-bottom: 3px solid var(--color);
 transition: 0.5s;
}

.main_div:hover::before {
 width: 100%;
 height: 100%;
}

.main_div:hover::after {
 width: 100%;
 height: 100%;
}

.main_div button {
 padding: 0.7em 2em;
 font-size: 16px;
 background: #222222;
 color: #fff;
 border: none;
 cursor: pointer;
 font-family: inherit;
}