Close

E-Commerce product card with buttons

This is an example of an E-commerce single product card with an Add to Cart button, designed using CSS, HTML styles and Bootstrap framework 4. The product image is imported to the code with its URL. The body of the form is given a background color of #E0E0E0. The product card is given the styles of box-shadow as 0 20px 40px rgba(0, 0, 0, .2), border-radius as 5px, and padding-bottom as 10px. The card title is given a font-weight as bold to highlight the text. The 'View Details' button is given a border style as 1.5px solid grey, font color as #212121, width as 100%, and box-shadow style as 0px 0px 10px #212121. The 'Add to Cart' button is displayed with the styles of background-color as #212121, font color as white, margin-top as 10px, font-size as 12px, font-weight as 900, width as 100%, height as 39px, padding-top as 9px, and box-shadow as 0px 5px 10px #212121. The 'Add to Cart' button changes its font color to black, in a hover event. Source: https://bbbootstrap.com/snippets/ecommerce-single-product-add-cart-button-21268162

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published. Required fields are marked *

Several Related Snippets

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.