Adding gradient sparkles to the blog title & upvote button

2 Oct 2024

I felt my Bearblog needed a little extra sparkle ✨, so I added gradient sparkles to my blog title (see above) and my upvote button¹ (see below).

Here are the CSS snippets for anyone interested in more sparkle. :)

Gradient colors

Define light & dark mode colors in :root.

I'm using the Catppuccin palette. My gradient starts with the text color, then mauve in the middle and pink at the end.

/* Colors: Light mode */
:root {
  --text-color: #4c4f69;
  --gradient: linear-gradient(90deg, #4c4f69 0%, #8839ef 50%, #ea76cb 100%);
}
/* Colors: Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #cdd6f4;
    --gradient: linear-gradient(90deg, #cdd6f4 0%, #cba6f7 50%, #f5c2e7 100%);
  }
}

Sparkles after the blog title

.title h1::after {
  content: "*:･ﾟ✧";
  background: var(--gradient);
  color: transparent;
  background-clip: text;
}

Heart emoji upvote buttons & sparkles after upvote count

.upvote-button svg {
  display: none;
}
.upvote-button {
  display: block !important;
  font-size: 1rem;
}
.upvote-button[disabled] {
  color: var(--text-color) !important;
}
.upvote-count {
  font-size: inherit;
}
.upvote-button::before {
  content: "🤍";
  cursor: pointer;
}
.upvote-button:hover::before {
  content: "❤️";
  cursor: pointer;
}
.upvote-button[disabled]::before {
  content: "💖";
  cursor: default;
}
.upvote-count::before {
  content: " — ";
}
.upvote-count::after {
  content: " ₊˚✩⊹";
  background: var(--gradient);
  color: transparent;
  background-clip: text;
}

Heart emoji upvote buttons & sparkles without upvote count

.upvote-button svg,
.upvote-count {
  display: none;
}
.upvote-button {
  display: block !important;
  font-size: 1rem;
}
.upvote-button::before {
  content: "🤍";
  cursor: pointer;
}
.upvote-button:hover::before {
  content: "❤️";
  cursor: pointer;
}
.upvote-button[disabled]::before {
  content: "💖";
  cursor: default;
}
.upvote-button::after {
  content: " ₊˚✩⊹";
  background: var(--gradient);
  color: transparent;
  background-clip: text;
  cursor: pointer;
}
.upvote-button[disabled]::after {
  cursor: default;
}