Animated Gradient Border

In this tutorial, you will learn how to create a gradient border on a button in three steps using CSS. First, add a simple button with transparent border then add a linear-gradient background property to its 'after' pseudo element. Second, add an infinite ease animation to the button's 'after' pseudo element. Lastly, apply the two steps on hover. Watch the video below for a detailed tutorial.

HTML

<body>
    <button type="button">Button</button>
</body>

CSS

body {
    background-color: #2e3537;
    padding: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

button {
    background: #2e3537;
    padding: 0.75em 1.5em;
    border: 3px solid #E77670;
    color: white;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    transition: 0.5s;
}

button:hover {
    border-color: transparent;
    letter-spacing: 5px;
}

button:hover:after {
    content: '';
    position: absolute;
    background: linear-gradient(90deg, #F4A889, #E77670, #B63565, #5073b8, #1098ad, #6fba82);
    height: calc(100% + 3px * 4);
    width: calc(100% + 3px * 4);
    top: calc(-3px * 2);
    left: calc(-3px * 2);
    z-index: -1;
    border-radius: 5px;
    background-size: 200%;
    animation: animate 1s ease infinite alternate;
}

@keyframes  animate {
    from {
        background-position: 0% 50%;
    }
    to {
        background-position: 100% 50%;
    }
}