All demo here

Notes

• Apply for Button Block only. If you need to apply on Submit Button,.. please send me a message.
• Buttons on One Page. Add to Page Settings > Advanced > Header or Add Code Block > Insert code
• Buttons on Entire Site. Remove <style></style> and Add to Home > Design > Custom CSS

Button 01

<style>
/* Button 01 */
/* button text border color */
.button-block a {
    color: #a34acb !important;
    border: 1px solid #a34acb !important;
    position: relative;
    background: transparent !important;
    overflow: hidden;
    z-index: 1;
}
/* Button hover background */
.button-block a:before {
    content: "";
    display: block;
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    bottom: -1px;
    background: #581974;
    transform: translate(-100%);
    transition: 0.5s ease-in-out;
  z-index: -1;
}
.button-block a:after {
    z-index: -1;
}
/* button text hover color */
.button-block a:hover {
    color: #e4caf0;
}
.button-block a:hover:before {
    transform: translate(0);
}
</style>

Button 02

<style>
/* misc */
.button-block a:after, .button-block a:before {
    z-index: -1;
    transition: 0.5s ease-in-out;
}
/* button text border color */
.button-block a {
    color: #50915f !important;
    border: 1px solid #50915f !important;
    position: relative;
    background: transparent !important;
    overflow: hidden;
    z-index: 1;
}
/* button text hover */
.button-block a:hover {
    color: #ccdfd0 !important;
}
/* button hover */
.button-block a:before {
    content: "";
    display: block;
    position: absolute;
    top: -1px;
    left: 0;
    right: -50px;
    bottom: -1px;
    border-right: 50px solid transparent;
    border-bottom: 80px solid #1d4b28;
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
}
.button-block a:hover:before {
    transform: translateX(0);
    -webkit-transform: translateX(0);
}
</style>

Button 03

<style>
/* misc */
.button-block a:after, .button-block a:before {
    z-index: -1;
    transition: 0.5s ease-in-out;
}
/* button text border color */
.button-block a {
    color: #5282be !important;
    border: 1px solid currentColor !important;
    position: relative;
    background: transparent !important;
    overflow: hidden;
    z-index: 1;
}
/* button text hover */
.button-block a:hover {
    color: #ccdaec !important;
}
/* button hover */
.button-block a:before, .button-block a:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-bottom: 80px solid #1f416b;
    z-index: 10;
}
.button-block a:before {
    right: -50%;
    border-right: 50px solid transparent;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}
.button-block a:after {
    left: -50%;
    border-left: 50px solid transparent;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}
.button-block a:hover:before {
    -webkit-transform: translateX(-40%);
    transform: translateX(-40%);
}
.button-block a:hover:after {
    -webkit-transform: translateX(40%);
    transform: translateX(40%);
}
</style>