<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;
}

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

/* next button */
.btn-next {
    color: greenyellow;
    border-color: greenyellow;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.