How to make SHOP NOW text on homepage image banner, a button – Baseline Theme

Topic summary

A user seeks to convert “SHOP NOW” text on their homepage image banner into a button in the Baseline theme. Initially, the text appears as plain text without button styling options in the editor.

Solution Provided:

  • Two community members offer CSS code solutions to be added to the theme.liquid file before the </head> or </body> tag
  • The code successfully transforms the text into a styled button

Follow-up Issues:

  1. Padding adjustment: User can modify color and text size but padding changes don’t take effect. Solution: Add additional CSS targeting .rte.text-base with custom padding values

  2. Inconsistent application: The button styling works on the initial image banner but fails to apply to a newly added image split section lower on the homepage, despite the code remaining in place

Current Status:
The discussion remains open with the second issue unresolved—the user is seeking guidance on why the button styling doesn’t extend to all homepage image sections.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.

This worked, thanks! I was able to change the color and adjust the text size, but nothing happens when I change the padding. I’d like the button to be larger without the font being larger, meaning that the button edges don’t touch the letters but there is more space around the letters. Is this possible?