JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div id="body_button">
 <div class="button_hola"><span>ZORNET.RU</span></div>
</div>

CSS

#body_button{
 background: #171515;
 height: 300px;
 margin: 0;
 padding: 0;
 color: #ededf9;
 background-color: #121229;
 text-align: center;
 padding-top: 12vh;
}
.button_hola,
.button_hola::before,
.button_hola::after,
.button_hola span,
.button_hola span::before,
.button_hola span::after
{
 transition: all ease .5s;
}
 
.button_hola{
 position: relative;
 display: inline-block;
 padding: 0.3em;
 margin: 1em;
 border: solid 1px;
 text-transform: uppercase;
 cursor: pointer;
}
 
.button_hola:hover
{
 box-shadow: 0 0 5em .5em rgba(82, 82, 210, 0.42);
}
 
.button_hola span
{
 display: inline-block;
 /* width: 100%; */
 padding: 0.6em 2em;
}
 
.button_hola:hover span
{
 background-color: #f7eeee;
 color: #151523;
}
 
.button_hola::before,
.button_hola::after,
.button_hola span::before,
.button_hola span::after
{
 content: '';
 position: absolute;
 border: 1px;
}
 
.button_hola::before,
.button_hola span::before
{
 border-style: solid none; 
}
 
.button_hola::before,
.button_hola span::after{ 
 left: 0;
 top: -0.4em;
 width: 100%; 
 height: calc(100% + 0.8em);
}
 
.button_hola::after,
.button_hola span::after
{
 border-style: none solid; 
}
 
.button_hola::after,
.button_hola span::before
{
 top: 0;
 left: -0.4em;
 height: 100%;
 width: calc(100% + 0.8em); 
}
 
.button_hola:hover::after,
.button_hola:hover span::after
{
 transform: scaleY(0);
}
 
.button_hola:hover::before,
.button_hola:hover span::before
{
 transform: scaleX(0);
}
 
.button_hola:hover span::after,
.button_hola:hover span::before
{
 opacity: 0;
}