As you noticed, the default button of bootstrap framework is using in TomatoCart bootstrap template. Frankly, the style of the button isn’t elegant enough. I have modified the buttons as follow:

Figure 1. Product listing page

Figure 2. Product info page

Figure 3. Login page

It’s not difficult to apply the new button for your store. We just need to add some css code into the stylesheet of bootstrap template.

Step 1. Open templates > bootstrap > css > all.min.css and stylesheet.css with your favorite text editor tool.

Step 2. Add following css code at the bottom of above file:

a.btn, button.btn {
  background-color: transparent;
  background-image:none;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.4);
  padding: 4px 20px;
  position: relative;
  -webkit-transition: background-color 250ms, border 250ms;
          transition: background-color 250ms, border 250ms;
  border-color: #1c7dfa;
  color: #000000;
}

.btn .icon-white {background-image:url(../img/glyphicons-halflings.png) !important;}
.btn:hover, .btn.inverse {
  background-color: #1c7dfa;
}
.btn:focus {
  background-color: #1c7dfa;
}
.btn:focus, .btn:active {
  outline: none;
}
.btn:disabled {
  border-color: rgba(28, 125, 250, 0.65);
}
.btn.inverse:hover {
  background-color: transparent;
  border-color: #1c7dfa;
}

And that is it :). If you require any assistance with this, please don’t hesitate to comment below.

Looking for quality TomatoCart hosting? Check out Arvixe Web Solutions.