Anatomy of a Personal Blog: The Upvote Button
If you find this post helpful, a mention or link back is appreciated, but optional.
By default, the Bear upvote button (aka Toast button) looks like this:
Not bad, but I wanted something that felt more "upvote-y" especially considering there's no matching downvote button. One thought was to use a toast emoji 🥂, however it begs the question of what a non-upvoted state would look like. A grayscale wine emoji 🍷 or toast emoji 🥂 just doesn't seem to quite communicate the button intent.
The option I settled on is using a heart, specifically ♡ (called "White Heart Suit") and ♥ (called "Black Heart Suit"). The display of these can vary a bit based on platform, but typically the ♡ character shows as a heart outline and ♥ shows as a filled in heart either in the text color or in red.
Initial upvote/toast button
Upvote button after click (on Firefox desktop)
To remove the default icon, the corresponding SVG element can be hidden with CSS
main .upvote-button svg {
display: none;
}
Then add the corresponding default heart and override it when upvoted. When a page loads that has already been upvoted, the button will have the "upvoted" class, but a newly upvoted post will change color instead.
main .upvote-button::before {
content: "♡";
}
main .upvote-button.upvoted::before,
main .upvote-button[style="color: salmon;"]::before {
content: "♥";
}
Lastly, the default theme has the cursor change to a pointer when over the button, but this is missing from the theme I used. It can be added back with the following:
main .upvote-button {
cursor: pointer;
}
And that's it! You can see the button in action down below 🙂 Note that removing an upvote/untoasting is a planned feature and doesn't currently work on any page on the site.