How to add a button in a list-details page using HTML code

Custom Coding
1

I’m trying to implement the workaround on how to embed a custom code.

I got the following code from Claude.ai and inserted it under “Custom Code”

<div style="text-align: center; padding: 20px;">
  <button style="background-color: #FF4500; color: white; padding: 10px 20px; border: none; border-radius: 5px; font-size: 16px; cursor: pointer;">
    Custom Button
  </button>
</div>

But it didn’t work.

I asked it again, and it provided the following solution:

I see the issue. The code you’ve added is placed in the section of the HTML document, which is not where visible elements like buttons should go. The section is typically used for metadata, stylesheets, and scripts, not for content that should be displayed on the page.

To create a visible button, we need to modify our approach:

First, we’ll create a style in the section.
Then, we’ll need to find a way to insert the actual button HTML into the body of the page.
Let’s start by updating the code in the section:

<style>
  .asset-allocation-button {
    background-color: #FF4500;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
  }
</style>

Now, you should place this style code inside the section of your Softr page.

For the actual button, you’ll need to find a way to insert HTML into the body of your page. Softr likely provides a way to add custom HTML elements to your page content. Look for options like “Custom HTML”, “HTML Element”, or “Code Block” in the Softr page editor.

When you find that option, insert this HTML:

<button class="asset-allocation-button">Asset Allocation</button>

Any idea where to insert that?

Any ideas how to get that custom button on a page?

2

Hi

You need to use a custom code block (it’s one of the static blocks)

3

Thanks, Matthieu.
I’d like the button to be included on a normal block. The idea is to add a button to a specific place on a specific page.

4

This is the only way to do this:

You add a custom code block in the page, you place it wherever you want (a custom code block can be moved as any other block). I’m talking of the custom code block, not the custom code header or footer, right?

Adding a button or any other hardcoded component inside a block like a list block, table block or any other block may be way too hard if you don’t know how to do it. You would need to play with relative placement according to other existing elements.