Underline links as buttons

Store Design
,

Topic summary

A user wants to style buttons as simple underlined text instead of traditional button styling on their Shopify store using the Impulse theme.

Store Details:

Solutions Offered:

Three different CSS approaches were provided:

  1. AnneLuo’s solution: Add custom CSS code above the </head> tag in theme.liquid file

  2. ZestardTech’s solution: Insert CSS into hero.css file targeting .slideshow__slide--slideshow-0 .btn with properties including background: none, text-decoration: underline, and specific padding/font-size adjustments

  3. PageFly-Amelia’s solution: Add CSS to base.css or theme.css file with similar styling targeting the same slideshow button elements

All solutions focus on removing button backgrounds and adding underline text decoration using !important flags to override existing styles. The discussion remains open with no confirmation of which solution was implemented or successful.

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

Hi

Is it possible to change style of buttons to just underlined text.

I use Impulse theme.

image.png
image.png432×271 100 KB

1 Like
2

Hi, @johanhallstrom

Can you share the store URL and take a screenshot to describe your requirements? So that I can assist you.

3

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

4

Thanks!

Pass: stewnu

I want just underlined text as buttons, see images.

Skärmavbild 2024-06-03 kl. 15.18.06.png
Skärmavbild 2024-06-03 kl. 15.18.06.png1196×699 1.13 MB

Skärmavbild 2024-06-03 kl. 15.17.46.png
Skärmavbild 2024-06-03 kl. 15.17.46.png1523×1263 431 KB

5

Thanks!

Pass: stewnu

I want just underlined text as buttons, see images.

Skärmavbild 2024-06-03 kl. 15.17.46.png
Skärmavbild 2024-06-03 kl. 15.17.46.png1523×1263 431 KB

Skärmavbild 2024-06-03 kl. 15.18.06.png
Skärmavbild 2024-06-03 kl. 15.18.06.png1196×699 1.13 MB

1 Like
6

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the tag

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

7

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > hero.css and paste this at the bottom of the file:
.slideshow__slide--slideshow-0 .btn{
background: none !important;
text-decoration: underline !important;
padding:5px
}
.slideshow__slide--slideshow-0 .btn:hover{
background: none !important;
transition-delay: unset !important;
}
.hero__link a.btn {
font-size: 15px;
}
8

Hello @johanhallstrom

This is Amelia at PageFly - Shopify Advanced Page Builder app.

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file base.css or theme.css

Step 3: Add code

.slideshow__slide--slideshow-0 .btn{
    background: none !important;
    text-decoration: underline !important;
}
.slideshow__slide--slideshow-0 .btn:hover{
    background: none !important;
}

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

1 Like