Removing Underline from Button in Stiletto Theme

[BellesandBells]

Hello,

I am working on a client’s website (Stiletto theme) and need help with CSS to remove the underline on the ‘Text’ Button styles. I have attached a screenshot of the button I am referring to.

Their website is www.arttoart.com.au

[Moeed]

Hey @BellesandBells

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Natasha-Saed]

Hi,

Go to online store

Edit Code

Open theme.css file

Paste the following code at the end of the file and save.

.btn.btn–callout span:before {display: none;}

.btn.btn–callout span:after {display: none;}

[KetanKumar]

@BellesandBells oh sorry for facing this issue can you try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

.btn--overlay.btn--callout::before, .btn--overlay.btn--callout::after {display: none;}

[htmlBurger]

Hello @BellesandBells

If you want to completely remove this underline from all buttons, you can just remove the code from the theme.css file.

Go to Online store → Themes → Edit code, and then open the theme.css file.

Find this piece of code in the file:

/* Full-width underline below the button */
.btn--overlay.btn--callout::before {
  content: "";
  position: absolute;
  bottom: -5px; /* Position the line just below the button */
  left: 0;
  width: 100%; /* Make the line span the full width of the button */
  height: 1px; /* Line thickness */
  background-color: white; /* Line color */
}

and just remove it.

I hope this helps.

[Dan-From-Ryviu]

Hi @BellesandBells

You can remove it by adding this code to Custom CSS in store admin > Sales channels > Online store > Themes > Customize

html .btn--overlay.btn--callout:before {
height: 0;
}

[PageFly-Richard]

Hi @BellesandBells

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Richard | PageFly

[LizHoang]

Hi BellesandBells

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file theme**.css** and add this code at the end of the file

.grid-item__button.section-blocks__button {
    border-bottom: unset !important;
}

Result:

Best,
Liz