Custom Liquid: custom coded buttons different size

Custom Liquid: custom coded buttons different size

ahana1605
Excursionist
22 0 8

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>

 

ahana1605_0-1662252437670.png

 

Replies 8 (8)

made4Uo
Shopify Partner
3877 719 1233

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
Shopify Partner
37634 3670 12166

@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
Excursionist
22 0 8

genhaat.com

ahana1605
Excursionist
22 0 8
BirgitteWad
Visitor
2 0 0

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
Tourist
6 0 1

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

KetanKumar
Shopify Partner
37634 3670 12166

@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
Tourist
6 0 1

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.