Custom Liquid: custom coded buttons different size

ahana1605 · ‎09-03-2022

Hi all,

I custom coded the blue buttons (code and screenshot attached below), but they are all not aligned and the shorts and skirts button is bigger and also ends at a lower position.

What is a way to make all the buttons the same size with editing the text?

<!DOCTYPE html>
  <html>
  
  <style>
  .button {
    width: 10%;
    border: none;
    border-radius: 12px;
    color: white;
    padding: 20px 22px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    font-weight: 510;
    margin: 20px 55px;
    cursor: pointer;
    }
  
  .button1 {
background: rgb(150,151,254);
background: -moz-radial-gradient(circle, rgba(150,151,254,1) 73%, rgba(255,255,255,1) 170%);
background: -webkit-radial-gradient(circle, rgba(150,151,254,1) 73%, rgba(255,255,255,1) 170%);
background: radial-gradient(circle, rgba(150,151,254,1) 73%, rgba(255,255,255,1) 170%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#9697fe",endColorstr="#ffffff",GradientType=1);
}

  
  </style>

<body>

  <div class="center">
  
    <button class = "button button1"> Dresses
    </button>

    <button class = "button button1"> Tops
    </button>

    <button class = "button button1"> Pants
    </button>

    <button class = "button button1"> Shorts
    &
    Skirts 
    </button>
  
  </div>
  
</body>
</html>

made4Uo · ‎09-03-2022

Hi @ahana1605,

Do you mean without editing the text? If so, please follow the instructions below

1. From your Admin store, go to Online store > Themes > Click Actions > Edit code
2. Open the Asset folder, and find the base.css file.
3. Add the code below.

button.button.button1 {
    white-space: nowrap;
    width: 12%;
}

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

KetanKumar · ‎09-03-2022

@ahana1605

can you please send store url?

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

ahana1605 · ‎09-04-2022

genhaat.com

ahana1605 · ‎09-04-2022

@KetanKumar ^

BirgitteWad · ‎07-12-2024

Wondered if you can give me a hint to make design of this button in liquid bigger and wider, maybe some color too

Liquid code in a field : {% if product.vendor == 'EBC Bremser' %}<button onclick="history.go(-1)">Gå tilbage</button>
{% endif %}

https://bagpotten.dk/products/111349

Thx in advance Henrik

Link to page :

moharsh · ‎12-17-2024

Hi Please give coding with option to redirect the button to a diff page , thanks

KetanKumar · ‎12-17-2024

@moharsh
Sorry you are facing this issue,
It would be my pleasure to help you.
Please share your site URL,
I will check out the issue and provide you with a solution here.

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

moharsh · ‎12-17-2024

Moharsh.in

what I want to do is, I want to give my customer options to click on a direct button on the top, wich takes them to a refreshed page with filtered options. Like M L XL XXL - Four buttons and upon selecting the button the page should show only the selected available size.

Custom Liquid: custom coded buttons different size

Custom Liquid: custom coded buttons different size

Community Blog Articles