Bear Blog upvote button styles

The default Bear Blog theme keeps the upvote button simple, a small arrow icon with a count underneath. That leaves some room to give it a bit more personality.

This page collects small CSS tweaks and variations for Bear's built-in upvote button. Each one works out of the box, but they're just as much meant as a starting point. Mix and match, tweak the values, or use them to learn more about theme styling.

Last updated 15 hours, 28 minutes ago.

Inherit font size

#upvote-form .upvote-button,
#upvote-form .upvote-count {
    font-size: inherit;
}

Pill

#upvote-form .upvote-button {
    flex-direction: row;
    align-items: center;
    gap: 0.2em;
    padding: 0.2em 0.9em;
    background: color-mix(in srgb, var(--text-color), transparent 92%);
    border-radius: 999px;
}

#upvote-form .upvote-count {
    font-size: inherit;
    margin-block-start: 0.15em;
}

Star

#upvote-form .upvote-button {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    opacity: 0.9;
}

#upvote-form .upvote-button svg {
    display: none;
}

#upvote-form .upvote-button::before {
    content: "☆";
    font-size: 1.5rem;
    line-height: 1;
    transition: transform 0.15s ease;
}

#upvote-form .upvote-count {
    font-size: inherit;
    font-variant-numeric: tabular-nums;
}

@media (hover: hover) {
    #upvote-form .upvote-button:not([disabled]):hover {
        opacity: 1;
    }

    #upvote-form .upvote-button:not([disabled]):hover::before {
        transform: scale(1.08);
        color: var(--link-color);
    }
}

#upvote-form .upvote-button[disabled] {
    opacity: 0.6;
}

#upvote-form .upvote-button[disabled]::before {
    content: "★";
}

@media (prefers-reduced-motion: reduce) {
    #upvote-form .upvote-button::before {
        transition: none;
    }
}

Inline

#upvote-form .upvote-button {
    flex-direction: row;
    align-items: center;
    gap: 0.3em;
}

#upvote-form .upvote-button svg {
    display: none;
}

#upvote-form .upvote-button::before {
    content: "▲";
    font-size: 1.8em;
}

#upvote-form .upvote-count {
    font-size: 1.2em;
    transform: translateY(0.25em);
}

Text

#upvote-form .upvote-button {
    padding-block: 0.3em;
    padding-inline: 0.6em;
    border: 1px solid;
    border-radius: 4px;
    font-size: inherit;
    opacity: 0.9;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

#upvote-form .upvote-button svg,
#upvote-form .upvote-count {
    display: none;
}

#upvote-form .upvote-button::before {
    content: "Like it?";
}

@media (hover: hover) {
    #upvote-form .upvote-button:not([disabled]):hover {
        color: var(--link-color);
        border-color: var(--link-color);
        background: color-mix(in srgb, var(--link-color), transparent 94%);
    }
}

#upvote-form .upvote-button[disabled] {
    opacity: 0.6;
}

#upvote-form .upvote-button[disabled]::before {
    content: "Thank you!";
}

@media (prefers-reduced-motion: reduce) {
    #upvote-form .upvote-button {
        transition: none;
    }
}

Heart

#upvote-form .upvote-button {
    flex-direction: row;
    align-items: center;
    font-size: inherit;
}

#upvote-form .upvote-button svg {
    display: none;
}

#upvote-form .upvote-count::before {
    content: "♡";
    display: inline-block;
    margin-inline-end: 0.15em;
    font-size: 1.8em;
    color: var(--link-color);
    vertical-align: -0.12em;
    transition: transform 0.15s ease;
}

#upvote-form .upvote-button[disabled] .upvote-count {
    color: color-mix(in srgb, var(--text-color), transparent 40%);
}

@media (hover: hover) {
    #upvote-form .upvote-button:not([disabled]):hover .upvote-count::before {
        transform: scale(1.15);
    }
}

#upvote-form .upvote-button[disabled] .upvote-count::before {
    content: "♥";
}

@media (prefers-reduced-motion: reduce) {
    #upvote-form .upvote-count::before {
        transition: none;
    }
}

Thumbs up

#upvote-form .upvote-button svg {
    display: none;
}

#upvote-form .upvote-count {
    font-size: inherit;
    margin-block-start: 0.3em;
}

#upvote-form .upvote-count::before {
    content: "👍";
    display: block;
    font-size: 1.5em;
    margin-block-end: 0.2em;
    transition: transform 0.15s ease;
}

#upvote-form .upvote-button:hover .upvote-count::before {
    transform: scale(1.15) rotate(-8deg);
}

#upvote-form .upvote-button[disabled] .upvote-count::before {
    transform: scale(1.1) rotate(-8deg);
}

@media (prefers-reduced-motion: reduce) {
    #upvote-form .upvote-button:hover .upvote-count::before,
    #upvote-form .upvote-button[disabled] .upvote-count::before {
        transform: none;
    }
}

Outline

#upvote-form .upvote-button {
    margin-block-start: 1.5em;
    flex-direction: row;
    align-items: center;
    gap: 0.1em;
    padding: 0.3em 0.9em;
    border: 1px solid;
    border-radius: 999px;
    font-size: inherit;
}

#upvote-form .upvote-count {
    font-size: inherit;
    margin-block-start: 0;
}

#upvote-form .upvote-button:hover {
    border-color: var(--link-color);
}

#upvote-form .upvote-button[disabled] {
    border-color: var(--link-color);
}

Count first

#upvote-form .upvote-button {
    margin-block-start: 1.7em;
    flex-direction: row-reverse;
    align-items: center;
    gap: 0.3em;
    font-size: inherit;
}

#upvote-form .upvote-button svg {
    display: none;
}

#upvote-form .upvote-button::before {
    content: "🍞";
    font-size: 1.3em;
    display: inline-block;
    transition: transform 0.15s ease;
}

#upvote-form .upvote-button[disabled]::before {
    content: "🔥";
}

@media (hover: hover) {
    #upvote-form .upvote-button:not([disabled]):hover::before {
        transform: scale(1.15) rotate(-6deg);
    }
}

#upvote-form .upvote-button[disabled]::before {
    transform: scale(1.1);
}

#upvote-form .upvote-count {
    margin-block-start: 0.3em;
    font-size: inherit;
}

@media (prefers-reduced-motion: reduce) {
    #upvote-form .upvote-button::before {
        transition: none;
    }
}

Hover reveal

#upvote-form .upvote-button {
    flex-direction: row;
    align-items: center;
    gap: 0.1em;
    font-size: inherit;
}

#upvote-form .upvote-button svg {
    display: none;
}

#upvote-form .upvote-button::before {
    content: "♡";
    font-size: 1.6em;
    transition: transform 0.15s ease;
}

#upvote-form .upvote-button[disabled]::before {
    content: "♥";
}

#upvote-form .upvote-count {
    margin-block-start: 0.3em;
    display: inline-block;
    width: 1.5em;
    font-size: inherit;
    opacity: 0;
    transition: opacity 0.2s ease;
}

@media (hover: hover) {
    #upvote-form .upvote-button:hover .upvote-count {
        opacity: 1;
    }

    #upvote-form .upvote-button:not([disabled]):hover::before {
        transform: scale(1.15);
    }
}

#upvote-form .upvote-button[disabled] .upvote-count {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    #upvote-form .upvote-button::before,
    #upvote-form .upvote-count {
        transition: none;
    }
}

Icon only

#upvote-form .upvote-button {
    font-size: inherit;
}

#upvote-form .upvote-button svg {
    display: none;
}

#upvote-form .upvote-button::before {
    content: "👏";
    font-size: 1.6em;
    transition: transform 0.15s ease;
}

#upvote-form .upvote-button[disabled]::before {
    content: "🙏";
}

#upvote-form .upvote-count {
    display: none;
}

@media (hover: hover) {
    #upvote-form .upvote-button:not([disabled]):hover::before {
        transform: scale(1.15);
    }
}

@media (prefers-reduced-motion: reduce) {
    #upvote-form .upvote-button::before {
        transition: none;
    }
}

Divider

#upvote-form .upvote-button {
    flex-direction: row;
    align-items: center;
    gap: 0.8em;
    font-size: inherit;
}

#upvote-form .upvote-button svg {
    display: none;
}

#upvote-form .upvote-button::before {
    content: "♡";
    font-size: 1.4em;
    padding-inline-end: 0.6em;
    border-inline-end: 1px solid;
}

@media (hover: hover) {
    #upvote-form .upvote-button:not([disabled]):hover::before {
        content: "♥";
    }
}

#upvote-form .upvote-button[disabled]::before {
    content: "♥";
}

#upvote-form .upvote-count {
    margin-block-start: 0.1em;
    font-size: inherit;
}

Badge

#upvote-form .upvote-button {
    margin-block-start: 1.7em;
    position: relative;
    font-size: inherit;
}

#upvote-form .upvote-button svg {
    display: none;
}

#upvote-form .upvote-button::before {
    content: "♡";
    font-size: 1.8em;
    transition: transform 0.15s ease;
}

#upvote-form .upvote-button[disabled]::before {
    content: "♥";
}

#upvote-form .upvote-count {
    position: absolute;
    inset-block-start: -0.4em;
    inset-inline-end: -0.6em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4em;
    height: 1.4em;
    padding-inline: 0.2em;
    border-radius: 999px;
    background: var(--link-color);
    color: var(--background-color);
    font-size: 0.7em;
    line-height: 1;
}

@media (hover: hover) {
    #upvote-form .upvote-button:not([disabled]):hover::before {
        transform: scale(1.15);
    }
}

@media (prefers-reduced-motion: reduce) {
    #upvote-form .upvote-button::before {
        transition: none;
    }
}

Bordered box

#upvote-form .upvote-button {
    margin-block-start: 1.8em;
    flex-direction: row;
    align-items: center;
    gap: 0.1em;
    padding: 0.4em 1em;
    border: 2px dotted;
    background: color-mix(in srgb, var(--code-background-color), transparent 80%);
    font-size: inherit;
    transition: border-style 0.15s ease;
}

#upvote-form .upvote-count {
    margin-block-start: 0;
    font-size: inherit;
}

#upvote-form .upvote-button:hover {
    border-style: solid;
}

#upvote-form .upvote-button[disabled] {
    border-style: solid;
}

@media (prefers-reduced-motion: reduce) {
    #upvote-form .upvote-button {
        transition: none;
    }
}

Text link

#upvote-form .upvote-button {
    margin-block-start: 1.7em;
    flex-direction: row;
    align-items: center;
    gap: 0.3em;
    color: var(--link-color);
    font-size: 1.1em;
}

#upvote-form .upvote-button svg {
    display: none;
}

#upvote-form .upvote-button::before {
    content: "♡ Upvote";
}

#upvote-form .upvote-button[disabled]::before {
    content: "♥ Upvoted";
}

#upvote-form .upvote-button:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

#upvote-form .upvote-count {
    display: none;
}

Want more? Check out the full Bear Blog library.