Removing Underline from Button in Stiletto Theme

Removing Underline from Button in Stiletto Theme

BellesandBells
Shopify Partner
27 0 10

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

 

Screen Shot 2025-02-04 at 4.18.51 pm.png

Replies 7 (7)

Moeed
Shopify Partner
6733 1819 2201

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

Moeed_0-1738650271088.png

 

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

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


Natasha-Saed
Shopify Partner
460 50 86

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;}

 

 

If my solution helped you don't forget to accept it to help others.
===================================================================
And if you really like my support share a cup of coffee with me paypal.me/freemindsint

KetanKumar
Shopify Partner
37585 3668 12151

@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;}

 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

htmlBurger
Shopify Partner
83 7 20

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.

Found this helpful? Like and accept as solution to help others too!
htmlBurger – Founded in 2007, Shopify experts for 10+ years.
Custom themes, UI/UX design, ongoing maintenance & support.
Let's talk: ecom@htmlburger.com

Dan-From-Ryviu
Shopify Partner
10939 2148 2286

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;
}

Screenshot 2025-02-04 at 15.40.20.png

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

PageFly-Richard
Shopify Partner
4902 1102 1779

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>

PageFlyRichard_0-1738720394461.png

 


Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available) 


All features are available from Free plan. Live Chat Support is available 24/7.

LizHoang
Shopify Partner
879 103 133

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: 

LizHoang_0-1738763576107.png

 

Best,
Liz

 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Check our Joy Rewards & Loyalty Program