Turn Link On Multicolumn into a button On Homescreen

Store Design
1

Hi Everyone!

I am working on my homepage. I am using the multicolumn function. I dont like the links you click on to visit pages of your website. I would much rather turn my links into black buttons with white text. Is there a way to do that?

Here is a link to my homepage to give you an idea of what I mean

https://www.betterparksproject.com/

Thank you in advance for any suggestions you can give

2

Hey @JSPENCER0203 I hope you are doing well.

In order to make the Multicolumn button styling with black background and white text then you need to paste the following code in the end of base.css file.

Here is how you can find base.css theme file.

  1. First go to Shopify Admin.
  2. Then go to Online Store.
  3. Now select the theme you want and click on Three Dots > Edit Code.
  4. In the Edit Code search bar search for Base.css file. Go to end and paste the following code.
.multicolumn-card__info .link{
    background: #111;
    padding: 8px 30px;
    color: white;
    border-radius: 30px;
    letter-spacing: normal;
}

Results:

thescriptflow_0-1743909345291.png
thescriptflow_0-1743909345291.png1336×448 242 KB

If you want hover effect on button then paste the following updated code.

.multicolumn-card__info .link{
    background: #111;
    padding: 8px 30px;
    color: white;
    border-radius: 30px;
    letter-spacing: normal;
    transition: 0.3s ease all;
}
.multicolumn-card__info .link:hover{
    background: #111111c7;
}

If you need more help please let me know.

Thanks

3

That worked perfectly! Thank you so much!!

4

You are welcome. I am happy that I can solve your issue.

And don’t forget to mark it as solution :blush: .