<html>
    <head>
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="index.css">
        <script src="index.js"></script>
    </head>
    <body>
        <div class="container">
            <button class="btn btn-back" type="button">Back</button>
            <button class="btn btn-refresh" type="button">Refresh</button>
            <button class="btn btn-next" type="button">Next</button>
        </div>        
    </body>
</html>
html, body {
    margin: 0;
    padding: 0;
}

body {
    background-color: black;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.btn {
    min-width: 70px;
    max-width: 200px;
    margin: 1em;
    padding: 1em 2em;
    border-radius: 5px;
    border-width: 2px;
    background-color: black;
    font-family: 'Ubuntu', sans-serif;
    font-size: 1em;
    letter-spacing: 1px;
}

.btn:hover,
.btn:focus {
    cursor: pointer;
}

/* back button */
.btn-back {
    color: hotpink;
    border-color: hotpink;
    background: linear-gradient(90deg, hotpink 0 50%, transparent 50% 100%);
    background-size: 200%;
    background-position: 100%;
}

@keyframes fillOutFrames {
    0% {
        color: black;
        background-position: 0%;
    }
    100% {
        color: hotpink;
        background-position: 100%;
    }
}

.fillOut {
    animation-name: fillOutFrames;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
}

/* refresh button */
.btn-refresh {
    color: orange;
    border-color: orange;
}

@keyframes blinkingBorder {
    0% {border-width: 0.1em;}
    50% {border-width: 1em;}
    100% {border-width: 0.1em;}
}

.blink {
    animation-name: blinkingBorder;
    animation-duration: 0.1s;
    animation-iteration-count: 1;
}

/* next button */
.btn-next {
    color: greenyellow;
    border-color: greenyellow;
}
// When the HTML has finished loading...
document.addEventListener('DOMContentLoaded', () => {
    // Handle click event on the refresh button
    document.querySelector('.btn-refresh').addEventListener('click', e => handleRefreshClick(e))
    // Handle click event on the back button
    document.querySelector('.btn-back').addEventListener('click', e => handleBackClick(e))
})

const handleRefreshClick = (event) => {
    const className = 'blink'
    
    // Animate the clicked button (event.target)
    // by adding the blink class for 100 milliseconds
    animateButton(event.target, className, 100)
}

const handleBackClick = (event) => {
    const className = 'fillOut'
    
    // Animate the clicked button (event.target)
    // by adding the fillOut class for 500 milliseconds
    animateButton(event.target, className, 500)
}

const animateButton = (button, classNameAnimation, milliseconds) => {

    // Remove the class if it exists
    button.classList.remove(classNameAnimation)
    
    // Add the class
    button.classList.add(classNameAnimation)

    // When the animation finishes, remove the class
    setTimeout(() => {
        button.classList.remove(classNameAnimation)
    }, milliseconds)
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.