Hover Box Shadow and Border Radius

HTML

<form>
    <p><input class="buttons" type=submit value="Cancel"></p>
</form>
    <p>From: <a href="https://support.mozilla.org/en-US/questions/978382#answer-505097">https://support.mozilla.org/en-US/questions/978382#answer-505097</a>
</p>

CSS

.buttons {
    color: #000000;
    background-color: #ffffff;
    border: 2px solid #000000;
    border-radius: 10px;
    font-family: arial;
    font-size: 20px;
    margin-right: 20px;
    transition: all 0.5s;
}
.buttons:hover {
    background-color: #6666ff;
    border: 2px solid #ffffff;
    box-shadow: -5px -5px 5px #888888, 5px -5px 5px #888888, -5px 5px 5px #888888, 5px 5px 5px #888888;
    color: #ffffff;
    text-shadow: -2px -2px 2px #000000, 2px -2px 2px #000000, -2px 2px 2px #000000, 2px 2px 2px #000000;
}