Change Button Border To Underline (Dawn Theme)

MMast · ‎05-02-2024

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:

How I want my site to look:

https://decemberschild.com
password: dc

Moeed · ‎05-02-2024

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

Vinsinfo · ‎05-02-2024

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

Result will be like,

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

Dan-From-Ryviu · ‎05-02-2024

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

Vinsinfo · ‎05-02-2024

@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

Moeed · ‎05-02-2024

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:

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

MMast · ‎05-02-2024

This is how the mobile view looks:

Moeed · ‎05-02-2024

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

MMast · ‎05-02-2024

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

Dan-From-Ryviu · ‎05-02-2024

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>

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

MMast · ‎05-02-2024

This is how the mobile version looks with that code:

Dan-From-Ryviu · ‎05-02-2024

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.

Vinsinfo · ‎05-02-2024

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

Result will be like,

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

MMast · ‎05-02-2024

This is how it looks on mobile view:

Vinsinfo · ‎05-02-2024

@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

Change Button Border To Underline (Dawn Theme)