Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Add to cart button change design Reply To: Add to cart button change design

#277173
wanderval
Participant

Hello dani,

1-For you inspect the structure html do you can use the “Inspect Element”, the chrome tool is better.
Devtools: https://developers.google.com/web/tools/chrome-devtools/inspect-styles/

2-you don’t need to use all my css code, just use what you need, I created the html just for example.

3-Don’t modify the .fa-shopping-bag or .fa-shopping-card class, because do you use this icon in other parts of website, put a class on element container of button then modify just this class. If you see my css code, do you go see some classes that I created, but do you could do of other ways.

This part of code I created the “container-card-button” and “icon-card” class, the same I applied a specific css.

CSS:

container-card-button {
  flex: 1;
  display: flex;
  align-items: center;
  background: #0090e3;
  color: #fff;
}

.container-card-button .icon-card {
  font-size: 22px;
  padding: 5px 8px;
}

I apply on ‘.btn-default’ class the porperty:

.btn-default {
  flex: 1;
}

I commented a property in ‘.product-thumb’ class, but do you can set this property to 0;

.product-thumb {
  padding-bottom: 0;
}

Thats is it.