body 
{
    background: #111;
}

.button
{
    left: 5%;
    font-family: "Orbitron";
    text-decoration: none;
    color: white;
    padding: 0.5rem 0.5rem;
    position: relative;
    transition: all .5s;
}

.button:before, .button:after
{
    content: "";
    position: absolute;
    width: 2rem;
    height: 2rem;
    border-color: purple;
    border-style: solid;
    transition: all .5s;
}

.button:before
{
    top: -1rem;
    left: -1rem;
    border-width: 3px 0 0 3px;
}

.button:after
{
    top: 1rem;
    right: -1rem;
    border-width: 0 3px 3px 0;
}

.button:hover:before, .button:hover:after
{
    width: 100%;
    height: 100%;
    border-color: darkorchid;
}

.button:hover
{
    background-color:  rgba(255, 0, 255, 0.5);
}

@media screen and (max-width: 800px)
{
    .button
    {
        width: 0%;
    }
}