How to make Codepen-like button with animated gradient border

In previous post, we showed how to make gradient border with CSS. This time, we go a little bit further. Let’s take a look at the beautiful button “Start coding” on Codepen.io homepage (you have to be logged out to see it). It also animates beautifully on mouse over:

@import url("https://fonts.googleapis.com/css2?family=Lato");

html, body {
    font-family: 'Lato';
    background: #1e1f26;
    padding: 0;
    margin: 0;
}

* {
    box-sizing: border-box;
}

.button-anon-pen {
    width: 200px;
    background-image: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b);
    text-align: center;
    margin: 0 auto;
    position: relative;
    color: #fff;
    text-decoration: none;
    display: block;
    top: 45vh;
    font-weight: normal;
    border-radius: 6px;
    overflow: hidden;
}

.button-anon-pen:hover {
    -webkit-animation: play 1.6s ease-in infinite;
}

.button-anon-pen span {
    padding: 14px 0;
    font-size: 22px;
    display: block;
    margin: 3px;
    background: #000;
    border-radius: 3px;
}

@-webkit-keyframes play {
    0% {
        background-position: 0px;
    }
    20% {
        background-position: -110px;
    }
    35% {
        background-position: -180px;
    }
    50% {
        background-position: -210px;
    }
    80% {
        background-position: -350px;
    }
    100% {
        background-position: -390px;
    }
}

<a href="#" class="button-anon-pen">
  <span>Start Coding</span>
</a>

Here you are, beautiful button:

See Codepen.