Live Code Editor

Try it yourself..

How to Make an Animated Button in HTML & CSS

Buttons are an important design element for your website, as well as a useful usability tool. As a result, here is a list of the best CSS buttons!

Learn how to make an animated button with HTML and CSS. Code an example with the animation property. Try out the code examples provided to create dynamic buttons for your website.

Buttons, whether thick and bold on your homepage or small and discreet in the footer, are an important design element for your website's user flow. A more discreet design is often used for a company website, whereas CSS buttons in the creative industries are more eye-catching and "weird." There are numerous styles and combinations available here to ensure that all industries are served equally.

Many other web developers and designers value hover and focus animations, which is why all of the buttons below have nice animations. But now we start directly!

HTML

CSS

:root {
    --border-radius: 2rem;
    --bg: #060D23;
    --btn-bg: #3F396F;
    --glow-size: 0.5rem;
    --background: #1F2336;
    --accent: #F4BD50;
}

body {
    background-color: var(--bg);
    font-family: 'Manrope',
        sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: 'Mulish', sans-serif;
    font-size: 16px;
    background-color: var(--background);
    display: grid;
    place-items: center;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.button-glow {
    min-width: 10rem;
    min-height: 3rem;
    text-decoration: none;
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    position: relative;
    z-index: 0;
    border-radius: var(--border-radius);
    transition: all 0.5s;
    gap: 0.5rem;
}

.button-glow:before {
    content: '';
    background: linear-gradient(to right, #B881FF, #A963F7,
            #8bff5d, #ffc300, #B881FF, #A963F7,
            #8bff5d, #ffc300, #B881FF);
    position: absolute;
    background-size: 300%;
    z-index: -1;
    filter: blur(var(--glow-size));
    width: calc(100% + var(--glow-size));
    height: calc(100% + var(--glow-size));
    opacity: 0;
    border-radius: var(--border-radius);
    animation: glow 25s alternate infinite;
    transition: opacity .5s linear;
}

.button-glow:active {
    background: var(--btn-bg);
}

.button-glow:hover:before {
    opacity: 1;
}

.button-glow:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--btn-bg);
    left: 0;
    top: 0;
    border-radius: var(--border-radius);
}

@keyframes glow {
    0% {
        background-position: 0 0;
    }

50% {
        background-position: 300% 0;
    }

100% {
        background-position: 0 0;
    }
}

.cta-button {
    box-shadow: 0 0 0 0 var(--accent);
    outline: 2px solid;
    color: white;
    outline-color: white;
    outline-offset: 0;
    text-shadow: none;
    cursor: pointer;
    font-size: 1rem;
    line-height: 2.5rem;
    max-width: 160px;
    width: 100%;
    letter-spacing: 0.3rem;
    font-weight: 600;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    transition: all 550ms cubic-bezier(.36, .63, .5, .73);
}

.cta-button:hover {
    box-shadow: 0 0 0 2px var(--accent);
    outline-color: rgba(255, 255, 255, 0);
    outline-offset: 15px;
    color: var(--accent);
}

.background {
    background-color: var(--background);
    place-items: center;
    height: 100vh;
    display: flex;
    width: 680px;
    flex-wrap: nowrap;
    justify-content: space-evenly;
}

.button {
    color: #fff;
    cursor: pointer;
    font-size: 1rem;
    line-height: 2.5rem;
    max-width: 160px;
    width: 100%;
    letter-spacing: 0.3rem;
    font-weight: 600;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    transition: all 1s ease-in;
}

.button:hover {
    color: #FF9950;
}

.button svg {
    height: 40px;
    left: 0;
    top: 0;
    position: absolute;
    width: 100%;
}

.button rect {
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-dasharray: 450, 0;
    transition: all 0.5s linear;
}

.button:hover rect {
    stroke-width: 5;
    stroke-dasharray: 20, 300;
    stroke-dashoffset: 48;
    stroke: #FF9950;
    transition: all 2s cubic-bezier(0.22, 1, 0.25, 1);
}

Live Code Editor

How to Make an Animated Button in HTML & CSS

HTML

CSS

JavaScript

Output