我们 Bearblogger 们都很喜欢设计我们的吐司按钮，所以我觉得这篇文章或许能对社区有所帮助。（昨晚睡觉前看到了 Ruth 的Bearblog 吐司按钮 CSS ，就留了个笔记，想分享一些吐司按钮的 CSS。）
默认的 toast 按钮
Toast 按钮的 HTML 是：
<button class="upvote-button" title="Toast this post"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"> <polyline points="17 11 12 6 7 11"></polyline> <polyline points="17 18 12 13 7 18"></polyline> </svg> <small class="upvote-count">10</small> </button>定义其外观的默认 CSS 是：<button class="upvote-button" title="Toast this post"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"> <polyline points="17 11 12 6 7 11"></polyline> <polyline points="17 18 12 13 7 18"></polyline> </svg> <small class="upvote-count">10</small> </button>
.upvote-button { padding: 0; margin: 0; border: 0; background-color: inherit; color: inherit; display: flex; flex-direction: column; align-items: center; } .upvote-button.upvoted { color: salmon; } .upvote-count { margin-top: -3px; }未烘烤.upvote-button { padding: 0; margin: 0; border: 0; background-color: inherit; color: inherit; display: flex; flex-direction: column; align-items: center; } .upvote-button.upvoted { color: salmon; } .upvote-count { margin-top: -3px; }
3
烤
3
该按钮显示为居中列，SVG 图标位于点赞数上方。它没有外边距、内边距或边框。它继承了主题的正文和背景颜色。当按钮被烤焦时，它会变成鲑鱼色。负外边距会缩小图标和点赞数之间的空间。它没有悬停样式。
Toast 按钮 CSS，部分
最常见的Toast 按钮自定义由以下部分组成：
1.隐藏 svg 图标
.upvote-button svg { display: none; }未烘烤.upvote-button svg { display: none; }
3
烤
3
2.隐藏点赞数
.upvote-count { display: none; }未烘烤.upvote-count { display: none; }
3
烤
3
3.在按钮后添加内容
.upvote-button::after { content: 'After 🧁'; }未烘烤.upvote-button::after { content: 'After 🧁'; }
3
烤
3
4.在按钮前添加内容
.upvote-button::before { content: 'Before 🍥'; }未烘烤.upvote-button::before { content: 'Before 🍥'; }
3
烤
3
5.添加边框、填充和颜色，使按钮看起来更像按钮
.upvote-button { border: 1px solid ButtonBorder; border-radius: .5em; padding: .5em; background-color: ButtonFace; color: ButtonText; }未烘烤.upvote-button { border: 1px solid ButtonBorder; border-radius: .5em; padding: .5em; background-color: ButtonFace; color: ButtonText; }
3
烤
3
6.更改字体系列、大小和颜色
.upvote-button { font-family: 'Nimbus Mono PS', 'Courier New', monospace; font-size: 3rem; color: cyan; }未烘烤.upvote-button { font-family: 'Nimbus Mono PS', 'Courier New', monospace; font-size: 3rem; color: cyan; }
3
烤
3
7.从垂直变为水平
.upvote-button { flex-direction: row; }未烘烤.upvote-button { flex-direction: row; }
3
烤
3
8.为不同的按钮状态添加样式
.upvote-button { /* Untoasted */ background-color: yellow; } .upvote-button:hover { /* Hover */ background-color: cyan; cursor: pointer; } .upvote-button[disabled] { /* Toasted */ background-color: purple; cursor: default; }（使用.upvote-button { /* Untoasted */ background-color: yellow; } .upvote-button:hover { /* Hover */ background-color: cyan; cursor: pointer; } .upvote-button[disabled] { /* Toasted */ background-color: purple; cursor: default; }
[disabled]而不是.upvoted ，以便在烘烤后样式立即改变。）
未烘烤
3
烤
3
混合在一起
以下是各部分如何组合在一起的几个示例：
1.用表情符号替换默认图标=
- 隐藏 svg 图标 +
- 在按钮 + 前添加内容
- 更改字体大小
.upvote-button svg { display: none; } .upvote-button::before { content: '⭐'; font-size: 1.5rem; } .upvote-count { margin: initial; /* Reset the negative margin (it's not needed anymore) */ }未烘烤.upvote-button svg { display: none; } .upvote-button::before { content: '⭐'; font-size: 1.5rem; } .upvote-count { margin: initial; /* Reset the negative margin (it's not needed anymore) */ }
3
烤
3
2.用按钮代替默认设置
- 隐藏 svg 图标 +
- 隐藏点赞数 +
- 在按钮 + 前添加内容
- 添加边框、填充和颜色
.upvote-button svg, .upvote-count { display: none; } .upvote-button::before { content: 'My button (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧'; border: 1px solid ButtonBorder; border-radius: .5em; padding: .5em; background-color: ButtonFace; color: ButtonText; }未烘烤.upvote-button svg, .upvote-count { display: none; } .upvote-button::before { content: 'My button (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧'; border: 1px solid ButtonBorder; border-radius: .5em; padding: .5em; background-color: ButtonFace; color: ButtonText; }
3
烤
3
3.更改不同按钮状态的内容=
- 隐藏 svg 图标 +
- 隐藏点赞数 +
- 在按钮 + 前添加内容
- 为不同的按钮状态添加样式
.upvote-button svg, .upvote-count { display: none; } .upvote-button::before { /* Untoasted */ content: 'I am a seed. 🌱'; } .upvote-button:hover::before { /* Hover */ content: 'Give me attention! 🌿'; cursor: pointer; } .upvote-button[disabled]::before { /* Toasted */ content: 'I am a tree. 🌳'; cursor: default; color: GrayText; /* To change the salmon color */ }未烘烤.upvote-button svg, .upvote-count { display: none; } .upvote-button::before { /* Untoasted */ content: 'I am a seed. 🌱'; } .upvote-button:hover::before { /* Hover */ content: 'Give me attention! 🌿'; cursor: pointer; } .upvote-button[disabled]::before { /* Toasted */ content: 'I am a tree. 🌳'; cursor: default; color: GrayText; /* To change the salmon color */ }
3
烤
3
4.用按钮替换图标，在右侧显示点赞数=
- 隐藏 svg 图标 +
- 在按钮 + 前添加内容
- 添加边框、填充和颜色 +
- 为不同的按钮状态添加样式 +
- 从垂直变为水平 +
- 在按钮后添加内容（更具体地说，是点赞数）
.upvote-button svg { display: none; } .upvote-button::before { /* Untoasted */ content: '🐽 Boop!'; border: 1px solid ButtonBorder; border-radius: .5em; padding: .5em; background-color: ButtonFace; color: ButtonText; } .upvote-button:hover::before { /* Hover */ content: '🐽 Boop back?'; cursor: pointer; } .upvote-button[disabled]::before { /* Toasted */ content: '🐈 Booped'; cursor: default; color: GrayText; /* To change the salmon color */ } .upvote-button { flex-direction: row; gap: .75em; /* Add space between button and upvote count */ } .upvote-count { margin: initial; /* Reset the negative margin (it's not needed anymore) */ color: GrayText; /* To change the salmon color */ } .upvote-count::after { content: ' booped'; }未烘烤.upvote-button svg { display: none; } .upvote-button::before { /* Untoasted */ content: '🐽 Boop!'; border: 1px solid ButtonBorder; border-radius: .5em; padding: .5em; background-color: ButtonFace; color: ButtonText; } .upvote-button:hover::before { /* Hover */ content: '🐽 Boop back?'; cursor: pointer; } .upvote-button[disabled]::before { /* Toasted */ content: '🐈 Booped'; cursor: default; color: GrayText; /* To change the salmon color */ } .upvote-button { flex-direction: row; gap: .75em; /* Add space between button and upvote count */ } .upvote-count { margin: initial; /* Reset the negative margin (it's not needed anymore) */ color: GrayText; /* To change the salmon color */ } .upvote-count::after { content: ' booped'; }
3
烤
3
5.解释悬停按钮=
- 隐藏 svg 图标 +
- 隐藏点赞数 +
- 在按钮 + 前添加内容
- 为不同的按钮状态添加样式 +
- 更改字体大小 +
- 在按钮 + 后添加内容
- 由垂直变为水平
.upvote-button svg, .upvote-count { display: none; } .upvote-button::before { /* Untoasted */ content: '🌹'; font-size: 1.5rem; } .upvote-button:hover::before { /* Hover */ cursor: pointer; } .upvote-button[disabled]::before { /* Toasted */ content: '🥀'; font-size: 1.5rem; cursor: default; } .upvote-button:hover::after { /* Hover */ content: 'Give a rose'; /* Explain the button */ } .upvote-button[disabled]::after { /* Toasted */ content: 'Oh no'; /* Something else, can be blank */ color: GrayText; /* To change the salmon color */ } .upvote-button { flex-direction: row; gap: .5em; /* Add space between emoji & text */ align-items: baseline; /* Align text */ }未烘烤.upvote-button svg, .upvote-count { display: none; } .upvote-button::before { /* Untoasted */ content: '🌹'; font-size: 1.5rem; } .upvote-button:hover::before { /* Hover */ cursor: pointer; } .upvote-button[disabled]::before { /* Toasted */ content: '🥀'; font-size: 1.5rem; cursor: default; } .upvote-button:hover::after { /* Hover */ content: 'Give a rose'; /* Explain the button */ } .upvote-button[disabled]::after { /* Toasted */ content: 'Oh no'; /* Something else, can be blank */ color: GrayText; /* To change the salmon color */ } .upvote-button { flex-direction: row; gap: .5em; /* Add space between emoji & text */ align-items: baseline; /* Align text */ }
3
烤
3
Toast 按钮真好玩！可能性超多。希望你喜欢。