Shark Toast Button (or other custom images)
For sharks, use code below. Or you can change the URLs to different images. See Toast button with changing images for additional instructions.
Shark Icons created by Puckung on Flaticon.
Shark icons in use (unclicked, hovering, clicked, clicked AND hovering):
Alternate Icon:
You can copy+paste https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/sign.webp to use the beware of shark sign in place of one of the icon urls I've used below.
While you're here: Please ask Steam to improve RSS Support
Code
You'll just copy+paste this code into your blog theme's CSS. Note: It also adds attribution information to your blog's footer.
/** The only part that needs modification for standard setups */
.upvote-button {
--width: 50px;
--height: 50px;
--unclicked_url: url("https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/ocean-1.webp");
--hover_url: url("https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/ocean1.webp");
--clicked_url: url("https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/ocean2.webp");
--clicked_and_hovering_url: url("https://bear-images.sfo2.cdn.digitaloceanspaces.com/reedybear/ocean3.webp");
}
/** attribution **/
body > footer::before {
display: block;
content: "Shark Toast icons by Puckung on Flaticon";
}
/* 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: For attribution, I changed footer::before to body > footer::before because on paid blogs, there are two footers and the attribution text would display twice. This is now fixed.