Toast button with changing images
You can set multiple images for your toast button. One for before anyone clicks, one for when they hover over it, another for after the click, and then (if ya nasty), ANOTHER one for if they're hovering AFTER they've toasted your post.
Also see Shark Toast Button
If you just want one image in all states, check out Custom Image for your Toast Button.
Credit: This was not my idea. I saw a caterpillar turn into a butterfly on another blog I saw. I CANNOT FIND THAT BLOG NOW. But here's mayadot who also has a caterpillar/butterfly toast button. And I found Sylvia's post which has a two-state solution.
Image Hosting: If you're not paying for bear and can afford it, you should. Otherwise, you could try imgur (which I use) or file garden (which I do not use and honestly don't know if it's trustworthy).
Finding Images: I source images from Pexels and Flaticon.
Shilling: Please ask Steam to improve RSS Support
The Code
You'll copy the below code into your blog theme's CSS, and you'll need to update the URLs and possibly the width and height values, depending on the aspect ratio of your photos. (if you don't update the URLs, then you'll have bears!)
When modifying the URLS, be sure you don't erase the quotation marks or the url() bit. If your images have different aspect ratios, you might need to edit the width and height for specific images, in which case you'd replace width: var(--width); with something like width: 37px;. You can delete any of the sections you don't want.
idea: Use bread when untoasted, a toaster when hovering, TOAST when toasted, and burnt bread when toasted and hovering
/** The only part that needs modification for standard setups */
.upvote-button {
--width: 50px;
--height: 40px;
--unclicked_url: url("https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/pexels-pixabay-1582331.webp");
--hover_url: url("https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/pexels-pixabay-158140.webp");
--clicked_url: url("https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/pexels-px7digital-11118588.webp");
--clicked_and_hovering_url: url("https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/pexels-philipp-schwarz-469323741-228635511.webp");
}
/* hide the default button */
.upvote-button svg {
display:none;
}
/* when your post is untoasted */
.upvote-count::before {
background: var(--unclicked_url);
display:block;
width: var(--width);
height: var(--height);
background-size:cover;
content: "";
}
/* when mouse hovers over the toast button */
.upvote-count:hover::before {
background: var(--hover_url);
display:block;
width: var(--width);
height: var(--height);
background-size: cover;
content: "";
}
/* when your post has been toasted */
.upvote-button[disabled] .upvote-count::before {
background: var(--clicked_url);
display:block;
width: var(--width);
height: var(--height);
background-size: cover;
content: "";
}
/* When mouse is hovering over your toast button AFTER your post is toasted */
.upvote-button[disabled] .upvote-count:hover::before {
background: var(--clicked_and_hovering_url);
display:block;
width: var(--width);
height: var(--height);
background-size: cover;
content: "";
}
Edit 2025-12-23: Removed this from my 'featured' and put the Shark Toast Button post there instead