FROM CACHE - en_header
Promotion image

Re: Change Button Border To Underline (Dawn Theme)

Solved

Change Button Border To Underline (Dawn Theme)

MMast
Trailblazer
182 1 26
‎05-02-2024 02:54 AM

Hi there!

I’m looking to change my current underline on my button border to an underline that fits the words properly and also placed closer that works for both mobile and pc version. Examples shown below.

How my site looks:

IMG_0546.jpeg

How I want my site to look:

IMG_0545.jpeg

 

https://decemberschild.com
password: dc

Labels:
1,215 Views
0 Likes
Report
Accepted Solutions (4)
In response to MMast

Moeed
Shopify Partner
7080 1903 2333
‎05-02-2024 03:23 AM

This is an accepted solution.

Hey @MMast 

 

Remove the previous code and add this updated code with the same steps mentioned above.

<style>
a.button.button--secondary:after {
    box-shadow: unset !important;
}
a.button.button--secondary {
    text-decoration: underline !important;
}
</style>

 

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


View solution in original post

1,169 Views
2 Likes
Report

Vinsinfo
Shopify Partner
486 165 169
‎05-02-2024 03:31 AM

This is an accepted solution.

@MMast Seems you have made some changes now. Please remove the underline and try below code. Let me know whether it is helpful for you.

1. From admin, go to "Online Store" -> "Themes".

2. Click "Customize" button from the current theme.

3. Click "Rich text" section and paste below code in the "Custom CSS" field like in the below attached screenshot.

 

.rich-text .rich-text__blocks .rich-text__buttons a.button {
  min-height: auto !important;
  padding: 3px 0px;
  border-bottom: 1px solid #000000;
}

 

Vinsinfo_1-1714634797938.png

 

Result will be like,

Vinsinfo_0-1714634385897.png

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support

View solution in original post

1,159 Views
1 Like
Report
In response to MMast

Dan-From-Ryviu
Shopify Partner
11360 2225 2399
‎05-02-2024 03:36 AM

This is an accepted solution.

Please update the code 

<style>
#shopify-section-template--22102499590454__rich_text_HLiBXX a.button.button--secondary:after {
    border-bottom: 1px solid #000;
    bottom: 6px;
    box-shadow: unset;
}
#shopify-section-template--22102499590454__rich_text_HLiBXX a.button.button--secondary {
    padding-left: 0;
    padding-right: 0;
}
</style>

- Found this helpful? Hit "Like" and "Accept as Solution"!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

1,152 Views
1 Like
Report
In response to MMast

Vinsinfo
Shopify Partner
486 165 169
‎05-02-2024 04:08 AM

This is an accepted solution.

@MMast Add below code with the previous code by following the steps mentioned in the previous comment. Let me know whether it works for you.

 

.rich-text .rich-text__blocks .rich-text__buttons a.button:after {
    box-shadow: none !important;
}

 

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support

View solution in original post

1,131 Views
1 Like
Report
Replies 10 (10)

Moeed
Shopify Partner
7080 1903 2333
‎05-02-2024 03:06 AM

Hey @MMast 

 

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>
a.button.button--secondary {
    text-decoration: underline !important;
}
a.button.button--secondary:after {
    left: unset !important;
}
</style>

RESULT:

Moeed_0-1714633590433.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


1,191 Views
0 Likes
Report
In response to Moeed

MMast
Trailblazer
182 1 26
‎05-02-2024 03:12 AM

This is how the mobile view looks:

IMG_0547.jpeg

 

1,185 Views
0 Likes
Report
In response to MMast

Moeed
Shopify Partner
7080 1903 2333
‎05-02-2024 03:23 AM

This is an accepted solution.

Hey @MMast 

 

Remove the previous code and add this updated code with the same steps mentioned above.

<style>
a.button.button--secondary:after {
    box-shadow: unset !important;
}
a.button.button--secondary {
    text-decoration: underline !important;
}
</style>

 

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


1,170 Views
2 Likes
Report
In response to Moeed

MMast
Trailblazer
182 1 26
‎05-02-2024 03:30 AM

That worked thank you! Is there a way to move the line down to my liking or back up if needed?

1,162 Views
0 Likes
Report

Dan-From-Ryviu
Shopify Partner
11360 2225 2399
‎05-02-2024 03:30 AM

Hi @MMast 

You can try to add this code to your theme.liquid file, after <head> 

 

<style>
#shopify-section-template--22102499590454__rich_text_HLiBXX a.button.button--secondary:after {
    border-bottom: 1px solid #000;
    bottom: 6px;
    box-shadow: unset;
}
#shopify-section-template--22102499590454__rich_text_HLiBXX a.button.button--secondary {
    padding-left: 0;
    padding-right: 0;
}
</style>

 

Screenshot 2024-05-02 at 14.30.39.png

 

 

- Found this helpful? Hit "Like" and "Accept as Solution"!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

1,161 Views
0 Likes
Report
In response to Dan-From-Ryviu

MMast
Trailblazer
182 1 26
‎05-02-2024 03:35 AM

This is how the mobile version looks with that code:

IMG_0548.jpeg

 

1,153 Views
0 Likes
Report
In response to MMast

Dan-From-Ryviu
Shopify Partner
11360 2225 2399
‎05-02-2024 03:36 AM

This is an accepted solution.

Please update the code 

<style>
#shopify-section-template--22102499590454__rich_text_HLiBXX a.button.button--secondary:after {
    border-bottom: 1px solid #000;
    bottom: 6px;
    box-shadow: unset;
}
#shopify-section-template--22102499590454__rich_text_HLiBXX a.button.button--secondary {
    padding-left: 0;
    padding-right: 0;
}
</style>

- Found this helpful? Hit "Like" and "Accept as Solution"!
- 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 - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

1,153 Views
1 Like
Report

Vinsinfo
Shopify Partner
486 165 169
‎05-02-2024 03:31 AM

This is an accepted solution.

@MMast Seems you have made some changes now. Please remove the underline and try below code. Let me know whether it is helpful for you.

1. From admin, go to "Online Store" -> "Themes".

2. Click "Customize" button from the current theme.

3. Click "Rich text" section and paste below code in the "Custom CSS" field like in the below attached screenshot.

 

.rich-text .rich-text__blocks .rich-text__buttons a.button {
  min-height: auto !important;
  padding: 3px 0px;
  border-bottom: 1px solid #000000;
}

 

Vinsinfo_1-1714634797938.png

 

Result will be like,

Vinsinfo_0-1714634385897.png

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support
1,160 Views
1 Like
Report
In response to Vinsinfo

MMast
Trailblazer
182 1 26
‎05-02-2024 03:40 AM

This is how it looks on mobile view:

IMG_0549.jpeg

 

1,149 Views
0 Likes
Report
In response to MMast

Vinsinfo
Shopify Partner
486 165 169
‎05-02-2024 04:08 AM

This is an accepted solution.

@MMast Add below code with the previous code by following the steps mentioned in the previous comment. Let me know whether it works for you.

 

.rich-text .rich-text__blocks .rich-text__buttons a.button:after {
    box-shadow: none !important;
}

 

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support
1,132 Views
1 Like
Report

Community Blog Articles

shopp-e-1741972742895593780274096851.png
Canadian merchants: Update account details by March 24, 2025 to continue us...

Shopify and our financial partners regularly review and update verification requiremen...

By Jacqui Mar 14, 2025
Shopify_0-1741780029041.png
New learning path from Shopify Academy: How to create a digital marketing s...

Unlock the potential of marketing on your business growth with Shopify Academy's late...

By Shopify Mar 12, 2025
CRO-Community-Promo.jpg
Expert insights on conversion rate optimization (CRO) from Shopify Academy ...

Learn how to increase conversion rates in every stage of the customer journey by enroll...

By Shopify Mar 5, 2025
Terms of Service Privacy Policy