# 我可以用CSS和HTML制作自定义按钮吗？

**URL:** https://meta.discourse.org/t/can-i-make-a-custom-button-with-css-and-html/245958
**Category:** Development
**Created:** [2022年十一月17日 20:15 UTC](https://meta.discourse.org/t/can-i-make-a-custom-button-with-css-and-html/245958 "2022-11-17T20:15:27Z")
**Posts on this page:** 1
**Showing post:** 3

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2022年十一月17日 22:55 UTC](https://meta.discourse.org/t/can-i-make-a-custom-button-with-css-and-html/245958/3 "2022-11-17T22:55:55Z")

</div>

> [@Danielabc](#):
>
> 我想做一个像这样的按钮

您是想在帖子中添加按钮（在这种情况下，请参阅[此主题](https://meta.discourse.org/t/what-are-the-different-ways-to-customize-content-inside-a-post-custom-attributes-and-such/226747)），还是想自定义 Discourse 界面的现有按钮？

> [@Danielabc](#):
>
> 在同一个链接中，我放了 CSS？

是的，但如果您想 **添加** 一个按钮到 Discourse 的界面，那又是另一回事了，需要编程。

顺便说一句，这个视频让我很困扰，因为创作者没有提供任何指向实际代码的链接（像 [https://codepen.io](https://codepen.io) 这样的网站对于处理这类东西非常有用）。这是相当高级的 CSS，手动从视频中复制会很麻烦。

出于好奇，我在网上搜索了一下，代码[在他们的网站上](https://www.codingnepalweb.com/cool-glowing-effect-on-buttons-html-css/)发布了。

* * *

为了补充 Jay 的回复，我将添加 [https://meta.discourse.org/t/make-css-changes-on-your-site/168101，如果您的唯一目的是自定义网站的](https://meta.discourse.org/t/make-css-changes-on-your-site/168101%EF%BC%8C%E5%A6%82%E6%9E%9C%E6%82%A8%E7%9A%84%E5%94%AF%E4%B8%80%E7%9B%AE%E7%9A%84%E6%98%AF%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BD%91%E7%AB%99%E7%9A%84) HTML 样式，这可能会更直接。

最后但同样重要的是，Discourse 论坛有一个很棒的预装插件，名为 Styleguide，您可以启用它，它将显示论坛几乎所有的元素及其当前的样式：

首先，启用 Styleguide 页面：  
管理面板 → 插件 → Styleguide → ⚙设置 → 勾选 **styleguide enabled** ✅。

 ![styleguide plugin](https://global.discourse-cdn.com/meta/original/4X/e/5/2/e5217b37aee4d06bd7979d58810b4304cc26fed3.png)

然后，您可以转到 Styleguide 页面。只需将 `/styleguide` 添加到您的论坛 URL 即可查看：

 ![image](https://global.discourse-cdn.com/meta/original/4X/2/a/b/2ab1cf58f0b9c10f45b76dda191e4bc89c5db9b1.png)

如果您对 CSS 和整体样式设计不太了解，我强烈建议您在着手这个按钮项目之前，先学习[基础知识](https://meta.discourse.org/t/make-css-changes-on-your-site/168101)。

---

_[View the full topic](https://meta.discourse.org/t/can-i-make-a-custom-button-with-css-and-html/245958)._
