How To Add Underline Under 'Button' Text

How To Add Underline Under 'Button' Text

MMast
Trailblazer
182 1 25

Thanks in advance! I am looking to add a underline under my button text for mobile and pc view. I am looking to have a bit of space between the word and the underline. Example shown below of exactly what I am looking for. 

IMG_0545.jpg

 

https://decemberschild.com/

password: dc

Replies 5 (5)

Made4uo-Ribe
Shopify Partner
6938 1647 2034

Hi @MMast 

Do you mean like this? 

Made4uoRibe_0-1719525934456.png

if it is chck this one. 

  1. From you Admin page, go to Online Store > Themes
  1. Select the theme you want to edit
  2. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  3. Then place the code below at the very bottom of the file.

 

.product-form__submit span {
    position: relative;
    text-decoration: none; 
    display: inline-block; 
    padding-bottom: 5px; 
}

.product-form__submit span::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px; 
    width: 100%;
    height: 1px; 
    background-color: currentColor;
}

 

  • And Save. 
If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
MMast
Trailblazer
182 1 25

Sorry I was not very specific. I am talking about the rich text 'Buttons'.

Screenshot 2024-06-27 181100.png

Made4uo-Ribe
Shopify Partner
6938 1647 2034

Oh check this one then. 

.rich-text__buttons a {
    position: relative;
    text-decoration: none; 
    display: inline-block; 
    padding-bottom: 5px; 
}

.rich-text__buttons a:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0; 
    width: 70%;
    margin: auto;
    height: 1px; 
    background-color: currentColor;
}

And save. 

Same Instruction. 

Made4uoRibe_0-1719527639152.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
MMast
Trailblazer
182 1 25

This works for just pc. Is there any way to make it work for mobile as well please.

Made4uo-Ribe
Shopify Partner
6938 1647 2034

That must work in all screen, I just check your store now but its visible on the mobile screen. 

Made4uoRibe_0-1719568759009.png

Did you refresh after save? 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.