# How to embed a button into a Topic Post
**URL:** https://meta.discourse.org/t/how-to-embed-a-button-into-a-topic-post/256473
**Category:** Development
**Tags:** css
**Created:** [February 28, 2023, 8:17am UTC](https://meta.discourse.org/t/how-to-embed-a-button-into-a-topic-post/256473 "2023-02-28T08:17:56Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@UnitedFreedom](https://meta.discourse.org/u/UnitedFreedom)
#### Post date: [February 28, 2023, 8:17am UTC](https://meta.discourse.org/t/how-to-embed-a-button-into-a-topic-post/256473/1 "2023-02-28T08:17:56Z")
Introducing the amazing embedded button - the ultimate solution for spicing up your topic posts! With just a click, you can add a whole new dimension to your content and leave your readers in awe. Plus, our embedded button comes with a 100% satisfaction guarantee - if you’re not completely satisfied with its awesomeness, we’ll give you your money back (just kidding, it’s totally free)! So why wait? Get your hands on our embedded button today and join the cool kids’ club!
I have created some call-to-action topics to increase sign-ups on my Discourse forum. Each topic is for a different marketing campaign. But they all share one thing in common…I want them to sign up after reading it. So instead of breaking the flow of the readers eye, I have added a button directly into the post for their convenience, and increased conversion rates. But you can use the button for whatever you want! 🙂
# Preview
* * *
# How to Enable
1. Add the custom CSS to your current theme.
```scss
[data-wrap="button"] a {
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
color: #FFF !important;
background-color: #007bff;
border-color: #007bff;
}
// Part #1 Allows text to be displayed to the right of a button.
[data-wrap="button"] {
display: inline-block;
}
// Part #2 Allows text to be displayed to the right of a button.
[data-wrap="text-after-button"] {
display:inline-block;
}
```
1. In your posts, copy
```plaintext
[wrap="button"][Get Started](https://example.com)[/wrap]
```
Or if you want text next to your button, try this…
```plaintext
[wrap="button"][Sign Up](https://YourDiscourseURL.com/signup)[/wrap]
[wrap="text-after-button"]<-- Click Here to get sign up to my discourse![/wrap]
```
---
### Author:  [@ufukayyildiz](https://meta.discourse.org/u/ufukayyildiz)
#### Post date: [March 1, 2023, 10:00pm UTC](https://meta.discourse.org/t/how-to-embed-a-button-into-a-topic-post/256473/2 "2023-03-01T22:00:34Z")
very nice, thank you.
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [March 10, 2023, 6:20pm UTC](https://meta.discourse.org/t/how-to-embed-a-button-into-a-topic-post/256473/4 "2023-03-10T18:20:48Z")
Hey @UnitedFreedom!
Your topic inspired me to create a proper topic about such modifications 👍
You can read it here guys: [Customize posts' contents with your own styles](https://meta.discourse.org/t/customize-posts-contents-with-your-own-styles/257738)
---
### Author:  [@UnitedFreedom](https://meta.discourse.org/u/UnitedFreedom)
#### Post date: [March 10, 2023, 6:47pm UTC](https://meta.discourse.org/t/how-to-embed-a-button-into-a-topic-post/256473/5 "2023-03-10T18:47:34Z")
I’m glad I was able to inspire you. You made a very easy to follow topic with pictures. Love it 🙂
---
### Author:  [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [September 15, 2025, 3:26pm UTC](https://meta.discourse.org/t/how-to-embed-a-button-into-a-topic-post/256473/6 "2025-09-15T15:26:36Z")
Quick CSS improvement from our side:
Since the HTML output is slightly different inside a cooked post for “wrap-buttons”, we adjusted the CSS markup since the `a` tag inside the `div > p` hierarchy contains the link and therefore clicking the button slightly above or below the link doesn’t trigger the link.
We managed to work around that to add more padding around the `a` tag and override the `margin-block` markup of the `` tag.
Also, the link color had to be adjusted.
```css
[data-wrap="btn-primary"] {
display: inline-block;
align-items: center;
justify-content: center;
margin: 0;
font-weight: normal;
color: var(--d-button-primary-text-color);
background-color: var(--d-button-primary-bg-color);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
border-radius: var(--d-button-border-radius);
transition: var(--d-button-transition);
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0);
font-size: var(--font-0);
line-height: normal;
box-sizing: border-box;
padding: 0;
border: var(--d-button-border);
padding: .5em .65em;
}
[data-wrap="btn-primary"] a,[data-wrap="btn-primary"] a:hover, [data-wrap="btn-primary"] a:active, [data-wrap="btn-primary"] a:visited {
color: var(--d-button-primary-text-color);
padding: .5em .65em;
}
[data-wrap="btn-primary"] p {
margin-block-start: 0;
margin-block-end: 0;
}
```
---
### Author:  [@pacharanero](https://meta.discourse.org/u/pacharanero)
#### Post date: [August 24, 2026, 1:16pm UTC](https://meta.discourse.org/t/how-to-embed-a-button-into-a-topic-post/256473/7 "2026-08-24T13:16:14Z")
Inspired by this CSS hack from the OP, I have made this Theme Component which gives you Custom Buttons. Nowhere near as customisable as your own CSS, but very much easier.
> [@'Custom Post Button' Theme Component](https://meta.discourse.org/t/custom-post-button-theme-component/410782):
>
> Please could a [@staff](https://meta.discourse.org/groups/staff) member consider moving this into #Customization > Theme component, I am unable to create new topics there. page_facing_upSummary Discourse Custom Post Button turns links inside Discourse posts into styled buttons.hammer_and_wrenchRepository [github.com/koloki-co/discourse-custom-post-button](https://github.com/koloki-co/discourse-custom-post-button)questionInstall guide [Installing a theme or theme component](https://meta.discourse.org/t/installing-a-theme-or-theme-component/63682)booksNew to Discourse themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme…
Thanks to the OP for the great idea.