Change design of "View Full Details"

[Aiham]

Hi, 

I would like to change the design of View full details in a featured product section, in this case called "Visa alla uppgifter" both on desktion and mobile. 

What I would like to achieve is: 

A button look with a background color of #334FB4 and the text and icon being in the middle of the button and the text color is set to #000000 and a border radius for the button of 10px. 

This is how it looks today: https://fjallochfena.se/pages/vara-lador

Pic:

I appreciate any and all answers. 

[Moeed]

Hey @Aiham 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.product__view-details {
    background: #334FB4 !important;
    width: 60% !important;
    padding: 10px !important;
    text-align: -webkit-center !important;
    border-radius: 20px !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Aiham]

Thank you Moeed, this worked partially because text color is still default which is black. But thank you it is solved now. Wish you a great day.

[Moeed]

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

[Aiham]

Thank you Jamez, this did not work for. But thank you it is solved now. Wish you a great day.

[Rahul_dhiman · Accepted solution]

Hello @Aiham 
Go to online store ---------> themes --------------> actions ------> edit code-------> assets----->section-main-product.CSS ----> line number 1161
and add this code 

a.link.product__view-details.animate-arrow {
background: #334fb4;
color: #ffffff;
border-radius: 10px;
padding: 10px;
width: 185px;
}

and the result will be

If this was helpful, hit the like button and mark the job as completed.
Thanks

[Aiham]

Thank you Rahul, this worked perfectly! Wish you a great day.

[Rahul_dhiman]

Thanks a lot....!!!

[Anshul_arora]

Hello

I understand you are looking to highlight the "Visa alla uppgifter" text by providing the background color, text color.

You can implement this change by using below mentioned CSS code.

Add the code at the bottom of the theme.liquid file before </body> tag and save.

<style>

a.link.product__view-details.animate-arrow {
background-color: #334FB4;
color: #000000;
border-radius: 10px;
text-align: center;
padding: 7px;
}

</style>

[Please feel free to change the color and pixel size as per your needs.]

Output -:

I hope the code helps you.

Please share if you have any queries.

Thank you.

[Aiham]

Thank you Anshul, Wish you a great day.