HTML Button animated backgrounds

~ 3 min read

button effects hover effect html

The approach

Exploring a few animated button background effects on interaction. Basic thought process is to position relative the button, and then animate an absolutely positioned pseudo ::before element within it with overflow hidden. Animation trigger will be either a click or hover of the element, with focus also being styled so touch devices still see an animation when hover is not supported.

Button background wipe left to right on hover

The Markup


<button class="btn swipe">
    Hover Me
</button>

The CSS

.btn.swipe {
    --bg-color: #235459;
    --bg-color-hover: #4bb1c0;
    --txt-color: white;
    --animate-duration: 200ms;
    display: inline-block;
    border: none;
    border-radius: 1rem;
    font-size: 1.5rem;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--bg-color);
    color: var(--txt-color);
    padding: 0.5rem 1rem;
}

.btn.swipe::before {
    content: '';
    position: absolute;
    display: block;
    inset: 0;
    z-index: -1;
    background-color: var(--bg-color-hover);
    transform: translateX(-100%);
    transition: all var(--animate-duration) ease-in-out;
}

.btn.swipe:hover::before, .btn.swipe:focus::before {
    transform: translateX(0);
}

Button background circle expand on click

Normally the click leads to a navigattion or form submit, but if you need to revert to the inactive/unfocused state just click outside the button.

The markup


<button class="btn click-circle">
    Click Me
</button>

The CSS

.btn.click-circle {
    --bg-color: #235459;
    --bg-color-hover: #4bb1c0;
    --txt-color: white;
    --animate-duration: 200ms;
    display: inline-block;
    border: none;
    border-radius: 1rem;
    font-size: 1.5rem;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--bg-color);
    color: var(--txt-color);
    padding: 0.5rem 1rem;
}

.btn.click-circle::before {
    content: '';
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    margin: 0;
    border-radius: 50%;
    z-index: -1;
    background-color: var(--bg-color-hover);
    transition: all var(--animate-duration) ease-in-out;
}

.btn.click-circle:active::before, .btn.click-circle:focus::before {
    width: 10rem;
    height: 10rem;
    margin: -5rem 0 0 -5rem;
}

all posts →