/* HTML */
<a href="#"><button class="button-27">Button</button></a>

/* CSS */
.button-27 {
 padding: 1rem 2rem;
 font-weight: 700;
 background: rgb(255, 255, 255);
 color: blueviolet;
 border-radius: .5rem;
 border-bottom: 2px solid blueviolet;
 border-right: 2px solid blueviolet;
 border-top: 2px solid white;
 border-left: 2px solid white;
 transition-duration: 1s;
 transition-property: border-top, 
    border-left, 
    border-bottom,
    border-right,
    box-shadow;
}

.button-27:hover {
 border-top: 2px solid blueviolet;
 border-left: 2px solid blueviolet;
 border-bottom: 2px solid rgb(238, 103, 238);
 border-right: 2px solid rgb(238, 103, 238);
 box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px;
}