Add button labels behind clickable link dawn theme

[PinkP]

Hi using dawn theme- how do i place a background behind the clickable link on the 'multicolumn section' 

Would  like to place a back back ground with white text - so it actually looks clickable like a button - behind more information secton 

Url is: https://9ki9ay5s28s35fsp-93422321940.shopifypreview.com

[Dan-From-Ryviu]

You can do that by adding this code to Custom CSS of that Multicolumn section.

a.link {  
    background: #000;
    padding: 8px 16px;
    color: #fff;
}

[rajweb]

Hey @PinkP ,

To make the "More Information" link look like a button in the Multicolumn section of the Dawn theme

Step-1

Follow these Steps:

1. Online Store

2. Themes

3. Customize

4. In the theme Editior, locate the Multicolumn section with the "More Information" link.

Step-2

1. Online Store

2. Themes

3. Edit code

4. In the sidebar, search for:

sections/multicolumn.liquid

5. Locate for this code  (near the bottom of each column block):

{%- if block.settings.link_label != blank -%}
  <a class="link animate-arrow" href="{{ block.settings.link }}">
    {{ block.settings.link_label | escape }}
    <span class="icon-wrap">&rarr;</span>
  </a>
{%- endif -%}

6. Add a class to the <a> tag. Modify it like this:

<a class="button-link animate-arrow" href="{{ block.settings.link }}">

Step 3: Add Custom CSS

In the sidebar, open:

assets/base.css

Scroll to the bottom and paste this CSS:

.multicolumn .button-link {
  display: inline-block;
  background-color: #000; /* Black background */
  color: #fff !important; /* White text */
  padding: 12px 20px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.multicolumn .button-link:hover {
  background-color: #333;
}

.multicolumn .button-link .icon-wrap {
  margin-left: 8px;
  display: inline-block;
  transform: translateY(1px);
}

If you want me to implement this for you, please feel free to reach out.

Best,

Rajat

Shopify Expert