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 </body> tag

<style>
.btn.btn--callout span:before {
    display: none !important;
}
</style>

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 </head> 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 </head>

<style>
section#shopify-section-template--22506249978164__d56e6473-06b9-43cc-aded-f0d0e84e7729 .btn.btn--callout::before {
    display: none !important;
}
</style>

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