How I style my toast button here

30 Jan, 2026

The default design for Bear Blog's toast button looks good, but it has become stale for me. Thankfully, it can be completely customized through CSS!

For the upvote button, I use the same appearance¹ as the navigation buttons, except I made the font size slightly larger than them.

button.upvote-button {
    font-family: 'EB Garamond', serif;
    font-size: 18px;
    background-color: #f2f2f2;
    color: #336d80;
    border: 1px solid #336d80;
    padding: 10px;
    transition: background-color 200ms, color 200ms, border 200ms;
}

button.upvote-button:hover {
    background-color: #336d80;
    color: #f2f2f2;
    transition: background-color 200ms, color 200ms, border 200ms;
}

In the code above, the background and text colors (along with the ones in the hovered button) are applicable only in light mode. Their color palette becomes inverted in dark mode. Same with the border color, where the tealish steel blue lines turn into white.

For the upvote arrows, I just hide the SVG¹ of two minimalist, north-pointing arrowheads (which are represented with the class named css-i6dzq1).

.css-i6dzq1 { display: none; }

For the number of upvotes or likes, I also hide it because I prefer not caring about my posts' metrics anymore. Thanks to echo~parallax for the inspiration!

.upvote-count { display: none; }

For the button text (which acts as a substitute for the toast count), I grab two Unicode characters that depict floral sparkles². Please note that there is a variation selector \fe0e after the normal sparkle's character code. This is inserted to prevent the sparkle from becoming an emoji. Fortunately, this is not needed after the heavy sparkle's character code.

Then, I write OK followed by a punctuation mark.

.upvote-button:after { content: '\2747 \fe0e  OK?'; }

.upvote-button:disabled::after {
    content: '\2748  OK!';
    color: #6b9fb1;
}

There are two ways for interpreting the OK in the toast button:

• OK? → You have discovered a blog post, which is not yet upvoted. As soon as you finish reading it, you might be wondering if you should toast it or not.
• OK! → You enjoy and/or resonate with my writing.

For the latter, I even changed the text color from salmon to the same color as the horizontal bar.

Feel free to use this as a guide for customizing your toast button in Bear Blog. Make sure to tweak your code to fit your blog's theme!

#how-to