昨天我的空闲时间比预期多了一些，所以我花了几个小时来摆弄每篇文章底部的“点赞/点赞/点赞”按钮。这个问题困扰了我很久，因为它到底是什么，以及为什么要点击它，我不太清楚。我参考了TakenVault 的 BearBlog 代码页面，最终参考了另外两个网站的 CSS 代码，才弄清楚该如何实现它： A Functioning Blog和hanki.dev。hanki.dev在博文中提供的解决方案实际上已经不再在他们的博客中使用了，所以我参考了他们当前博客的 CSS 代码。
前
后
我对它还是不太满意，但现在没时间再浪费了，所以我想把现有的功能贴出来。我主要想修改的地方是添加背景，让它更突出地显示为按钮；修复只有点击后才会出现外框的问题（你可能会觉得在 .upvote-button 或 .upvote-button::before 上加边框会起作用，但实际上不行，我也不知道为什么）；此外，我还想添加一个轻量级的悬停效果，强调它是可交互的。总的来说，我相信肯定有更简单的方法可以实现这一点，但我至少有 10 年没用过“正规”的 CSS 了，所以这都是些反复试验。如果有人有更简洁的方法来实现这一点，我很乐意听听。
另外，发这篇帖子的时候，我突然意识到我没有为代码块设置暗黑模式的CSS，所以看起来太丑了。另外，我也没时间修复这个问题，所以你们只能忍着了。
另外还要感谢scumsuck在昨天的帖子之后推荐使用 ShareX 快速截屏。我仍然在让它按我的意愿工作（每次截屏都会发出很大的噪音？不，谢谢），但它对这篇帖子来说效果还不错。发带图片的帖子会立即让发帖过程变得更加繁琐和耗时，我希望情况不会如此。我宁愿玩拼图或玩电子游戏。
/* emoji toast button */ .upvote-button svg { display: none; } .upvote-button::before { content: '🦎 say hi?'; display: block; font-size: var(--size-step-1); grid-area: emoji; margin-left: 4px; font-weight: bold; } .upvote-button { align-items: center; display: grid !important; grid-template-areas: 'emoji label' 'count ...'; flex-direction: column; gap: 0 4px; } .upvote-button.upvoted::before { content: '💜 thx!'; display: block; font-weight: bold; } .upvote-button.upvoted { border: 2px solid white; padding: 4px; border-radius: 4px; color: white !important; font-weight: bold; } .upvote-button::after { display: none; grid-area: label; } .upvote-count { font-size: var(--size-step-1); font-weight: bold; grid-area: count; margin-top: 0 !important; margin-left: 2px; }回复于/* emoji toast button */ .upvote-button svg { display: none; } .upvote-button::before { content: '🦎 say hi?'; display: block; font-size: var(--size-step-1); grid-area: emoji; margin-left: 4px; font-weight: bold; } .upvote-button { align-items: center; display: grid !important; grid-template-areas: 'emoji label' 'count ...'; flex-direction: column; gap: 0 4px; } .upvote-button.upvoted::before { content: '💜 thx!'; display: block; font-weight: bold; } .upvote-button.upvoted { border: 2px solid white; padding: 4px; border-radius: 4px; color: white !important; font-weight: bold; } .upvote-button::after { display: none; grid-area: label; } .upvote-count { font-size: var(--size-step-1); font-weight: bold; grid-area: count; margin-top: 0 !important; margin-left: 2px; }
帖子最后编辑于： 前
原文： https://anarchaeopteryx.bearblog.dev/2025-08-20-bearblog-toast-button-css/