[TomatoCart] Elegant button for bootstrap template

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

Snip20150225_26Figure 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;
  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.

Tags: , , , , , , , , , | Posted under TomatoCart | RSS 2.0

Author Spotlight

Jack Yin

TomatoCart Developer & Co Founder - Arvixe Web Hosting / TomatoCart Community Liaison

Leave a Reply

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