How can I alter the design of a single button on my homepage?

It can be done with a few code edits.

  1. Comment out max-width in section-rich-text.css (Check screenshot)
  2. Add a field for a new button in rich-text.liquid
,
        {
          "type": "text",
          "id": "button_label_3",
          "label": "t:sections.rich-text.blocks.buttons.settings.button_label_2.label",
          "info": "t:sections.rich-text.blocks.buttons.settings.button_label_2.info"
        },
        {
          "type": "url",
          "id": "button_link_3",
          "label": "t:sections.rich-text.blocks.buttons.settings.button_link_2.label"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary_3",
          "default": false,
          "label": "t:sections.rich-text.blocks.buttons.settings.button_style_secondary_2.label"
        }​
  • Add a new button into effect

                {%- if block.settings.button_label != blank -%}
                  

@Lucid_Polygon thank you so much, I appreciate your help. But the codes don’t work. I’ve been trying for 30 minutes straight… I get an error in the ‘rich text liquid’ and I don’t know why because it looks exactly like yours.

333.jpg

The code works as I have tested it before suggesting. What is the error you are getting?

@Lucid_Polygon sorry for my late reply… I have been trying some more time and now it worked! so cool. I made a little mistake by my own but it is perfect now. Can you help me with one more thing?

Because you already helped me with removing the outlines from the ‘how it works’ button. But when I add a link to the button the outlines come back again. Is there a way to solve this?