<p>
    Style 1: Rounded pseudo-elements
</p>
<div class="round">
    <a class="button" href="#">Button</a>
    <a class="button" href="#">Button</a>
    <a class="button" href="#">Button</a>
</div>

<br>
<br>
<p>
    Style 2: SVG stroke
</p>
<div class="svg">
    <a class="button" href="#">
        <svg>
            <rect height="40" width="130" fill="transparent" />
        </svg>
        <span>Button</span>
    </a>
    <a class="button" href="#">
        <svg>
            <rect height="40" width="130" fill="transparent" />
        </svg>
        <span>Button</span>
    </a>
    <a class="button" href="#">
        <svg>
            <rect height="40" width="130" fill="transparent" />
        </svg>
        <span>Button</span>
    </a>
</div>

<p>
    Style 3: Highlight made with pseudo-element
</p>
<div class="highlight">
    <a class="button" href="#">Button</a>
</div>

/* GENERAL STYLES */

body {
    text-align: center;
    background: black;
}

p {
    color: #ddd;
    font-family: Helvetica;
    font-size: 20px;
    margin: 20px 0 0 0;
}

a {
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    font-family: Helvetica;
}

a,
span {
    font-size: 20px;
}

svg {
    width: 130px;
    height: 40px;
}


/* THE ROUND PSEUDO-ELEMENT HOVER STYLES */
.round,
.svg,
.highlight {
    max-width: 960px;
    margin:0 auto;
}

.round a {
    color: crimson;
}

.round .button {
    display: inline-block;
    width: 130px;
    height: 40px;
    line-height: 40px;
    margin: 20px;
    position: relative;
    overflow: hidden;
    border: 2px solid crimson;
    transition: color .5s;
}

.round .button:before {
    content: "";
    position: absolute;
    z-index: -1;
    background: crimson;
    height: 150px;
    width: 200px;
    border-radius: 50%;
}

.round .button:hover {
    color: #fff;
}

.round .button:nth-child(1):before {
    top: 100%;
    left: 100%;
    transition: all .7s;
}

.round .button:nth-child(1):hover:before {
    top: -30px;
    left: -30px;
}

.round .button:nth-child(2):before {
    left: -30px;
    bottom: 100%;
    transition: all .7s;
}

.round .button:nth-child(2):hover:before {
    bottom: -50px;
}

.round .button:nth-child(3):before {
    top: 0;
    left: -200%;
    transition: all .7s;
}

.round .button:nth-child(3):hover:before {
    top: -30px;
    left: -30px;
}


/* THE SVG HOVER EFFECTS */
.svg .button {
    text-decoration: none;
    color: #fff;
    position: relative;
    display: inline-block;
    width: 130px;
    height: 40px;
    margin: 20px;
    overflow: hidden;
}

.svg .button:nth-child(3) {
    overflow: visible;
    position: relative;
    top: -20px;
}

.svg .button rect {
    position: absolute;
    top: 0;
    left: 0;
    stroke-width: 4px;
    stroke-dashoffset: 400px;
    stroke: olivedrab;
}

.svg .button span {
    color: olivedrab;
    width: 130px;
    height: 40px;
    display: inline-block;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    line-height: 40px;
    transition: all .2s linear;
}

.svg .button span:hover {
    color: #fff;
    background: olivedrab;
    transition: all 1s cubic-bezier(1.25s 0, 1.15, 1, 1);
    transition-delay: .5s;
}

.svg .button:nth-child(1):hover rect {
    animation: draw1 .75s linear forwards;
}

.svg .button:nth-child(2):hover rect {
    animation: draw2 .75s linear forwards;
}

.svg .button:nth-child(3) span {
    border: 3px solid olivedrab;
    transform: scale(1);
    width: 125px;
    height: 35px;
    line-height: 37px;
}

.svg .button:nth-child(3):hover span {
    animation: draw3 .75s linear forwards;
}

@keyframes draw1 {
    0% {
        stroke-dasharray: 300;
        stroke-dashoffset: 700;
        stroke-width: 4px;
    }
    75% {
        stroke-dasharray: 900;
        stroke-width: 1px;
    }
    100% {
        stroke-dasharray: 900;
        stroke-width: 1px;
    }
}

@keyframes draw2 {
    0% {
        stroke-dashoffset: 350;
        stroke-dasharray: 350;
    }
    50% {
        stroke-dashoffset: 600;
        stroke-dasharray: 400;
        stroke-width: 1px;
    }
    100% {
        stroke-dashoffset: 900;
        stroke-dasharray: 400;
        stroke-width: 1px;
    }
}

@keyframes draw3 {
    100% {
        transform: scale(1.35);
    }
}


/* HIGHLIGHT */
.highlight .button {
    display: inline-block;
    color: #fff;
    background: darkred;
    margin: 20px;
    width: 130px;
    height: 40px;
    line-height: 40px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.highlight .button:before {
    content: "";
    position: absolute;
    top: -30px;
    left: -80px;
    height: 100px;
    width: 70px;
    background: rgba(255, 255, 255, .7);
    transform: rotate(20deg);
}

.highlight .button:hover:before {
    left: 150px;
    transition: all .5s;
}
.highlight {margin-bottom:100px;}

/*

A selection of button hover styles I've used in recent projects.

Inspiration from a variety of sources.

*/