Make standard theme buttons look a little better. Desperatly need you help

Solved
MDKSocks
Pathfinder
139 1 22

Help.jpg

 

So instead of photshopping fake buttons on images like I used to do I used the text overlay from my theme (District). Above you can see what I have made so far! BUT it doesn't look that awesome yet. I like the square buttons, I like the animation and I like the position. But I don't like the colors.

Is it possible to make them look like this:

Funnysokkenananas.jpg

This is what I used to have. I don't mind if it is square instead of round edges. But I would love the letters to be more bold and the box be completely yellow but transparent like the picture. (color code: #fbb03e) A litte more transparent is needed maybe because they are now in the middle?

I really hope I can make this work with the help of this awesome community!

Go sock yourself! -- https://mdksocks.nl
dmwwebartisan
Shopify Partner
9208 2132 2904

@MDKSocks 

 add the following code at the bottom of your assets/theme.scss.liquid

#shopify-section-1632401168fa1626a5 .box figcaption h4 {
    color: #000000;
    border-radius: 48px !important;
    background-color: #fbb03e !important;
    opacity: 0.8 !important;
    border: none !important;
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
MDKSocks
Pathfinder
139 1 22

You absolute hero!!!! This is even better then I thought!!

I have one addittional question tho:

How can I change text style? So maybe make it more bold? And also make it that opacity doesn't apply for text but only for the background? Basically want the background as it is now, but with the letters more clear and maybe more bold.

But thanks so far because this is great!!!

@dmwwebartisan 

Go sock yourself! -- https://mdksocks.nl
dmwwebartisan
Shopify Partner
9208 2132 2904

@MDKSocks 

Please remove previous css & add this 

 

#shopify-section-1632401168fa1626a5 .box figcaption h4 {
    color: #000;
    border-radius: 48px!important;
    background-color: rgb(251 176 62 / 86%)!important;
    border: none!important;
}

 

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
MDKSocks
Pathfinder
139 1 22

Hey @dmwwebartisan 

If I do that my whole website get's white and messed up. Is it possible something went wrong or am I doing something wrong?

I also don't see text things in that CSS, but I only know basic stuff so it might still be there.

Thanks anyways mate, still appreciated! Hopefully we can make the letters bold and clear still

Go sock yourself! -- https://mdksocks.nl
0 Likes
dmwwebartisan
Shopify Partner
9208 2132 2904

@MDKSocks 

Please try this code 

#shopify-section-1632401168fa1626a5 .box figcaption h4 {
    color: #000;
    border-radius: 48px!important;
    background-color: rgb(251 176 62 / 86%)!important;
    border: none!important;
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
MDKSocks
Pathfinder
139 1 22

@dmwwebartisan This is what I get if I paste that code:

I hope it is still possible to make the letters at least clear but maybe also bold.

 

Damn.jpg

Thank you so far!

Go sock yourself! -- https://mdksocks.nl
0 Likes
MDKSocks
Pathfinder
139 1 22

@dmwwebartisan I am really happy with it anyways mate! Thank you!

If you or someone has any idea how to not include the latters with the opacity that would be great tho!! And make them bold!

Text-style: bold; Maybe?

Go sock yourself! -- https://mdksocks.nl
0 Likes
dmwwebartisan
Shopify Partner
9208 2132 2904

@MDKSocks 

What do you want?

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
MDKSocks
Pathfinder
139 1 22

@dmwwebartisan The letter to be opacity 100% while the rest stays as it is. I know it must be doable but I can't make it work.

And the letter bold(er) as well if possible.

So they look more like this: 

Funnysokkenananas.jpg

Go sock yourself! -- https://mdksocks.nl
0 Likes