How to style a button in product page

Solved
Tourist
6 0 0

I create a contact us button in my product pages as shown below

 

Capture.JPG

This is the code I inserted in product-template.liquid:

<button class="btn btn--add-to-cart btn--secondary-accent">
<a href=https://test.com= class="btn__text">Contacta con un asesor del sueño</a></button>

 

this is working well but I want to change the style of that button to: 

Capture2.JPG

 

What do I have to do?

 

Thank you for your help

0 Likes
Highlighted

Success.

Shopify Partner
87 29 20

Try this button instead!

<a href="https://test.com" class="product-form__cart-submit" style=" text-align: center; font-size: 20px; margin-top: 15px; background-color: #03a84e; border-color: #03a84e; "> Contacta con un asesor del sueño </a>
Is your store fast enough? Compare your store's speed against hundreds of others for free with our benchmarker - https://www.rvere.com/
1 Like
Highlighted
Tourist
6 0 0

That is what I needed  thank you. but I have a question, why my button is all capitalized? can I have it just the way that is written?  (Contacta con un asesor del sueño)

0 Likes
Highlighted

Success.

Shopify Partner
87 29 20

The add to cart button's CSS that we're using here auto-capitalizes the text in that button. Here's one that overrides that:

 

<a href="https://test.com" class="product-form__cart-submit" style=" text-align: center; font-size: 20px; margin-top: 15px; background-color: #03a84e; border-color: #03a84e; text-transform: none;"> Contacta con un asesor del sueño </a>
Is your store fast enough? Compare your store's speed against hundreds of others for free with our benchmarker - https://www.rvere.com/
1 Like