How to modify theme buttons and button set details.

AmeriCommerce provides 75 prestyled buttonsets to choose from. All of these are styled purely with css. 

 

buttons.png

 

Button Set CSS Overview


This is what a typical button set's CSS looks like:

/* [Buttons] */
/* Main Button */
.ThemeButton { 
  background-color: #FFA302; 
  box-shadow: 0 22px 0 0 rgba(255, 255, 255, 0.2) inset, 
              0 1px 0 0 rgba(255, 255, 255, 0.65) inset, 
              0 5px 0 0 #D55F00, 
              0 6px 5px 0 rgba(0, 0, 0, 0.25), 
              0 6px 2px 0 rgba(0, 0, 0, 0.25);
  border-bottom-color: #FF7902;
  color: white;
  border: solid 1px #F17E00;
  border-radius: 4px;
  font-family: "Helvetica Neue", Helvetica, Arial, Sans-serif;
  font-size: 15px;
  font-weight: bold;
  padding: 5px 15px;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.15);
  -webkit-transition: all 0.075s linear;
  -moz-transition: all 0.075s linear;
  transition: all 0.075s linear;
  cursor: pointer;
} 

/* Button Hover */
.ThemeButton:hover {
  background-color: #FFAF02;
}

/* Pressed Look */
.ThemeButton:active {
  box-shadow: 0 22px 0 0 rgba(255, 255, 255, 0.2) inset, 
              0 1px 0 0 rgba(255, 255, 255, 0.65) inset, 
              0 2px 0 0 #D55F00, 0 3px 5px 0 rgba(0, 0, 0, 0.25), 
              0 3px 2px 0 rgba(0, 0, 0, 0.25);
  position: relative;
  top: 3px;
}
/* [/Buttons] */

 

Here is an example button with the above CSS.

 

And here is a screenshot of the full button set, all from 3 CSS rules.



A common idea shared in the buttons is that most buttons will have multiple classes that can either inherit from a generic class. Keep in mind that anything that is more specific needs to go farther down.

A nice feature of this is the ability to have different styles for the same type of button. For Example you can style the Add to Cart button on the Category page differently from the Product Details Page, however you don't have to because it has the generic .AddToCartThemeButton class to style both the same.

Product Details Add to Cart Button:
<input type="submit" name="btnAddToCart" value="Add To Cart" id="btnAddToCart" class="ProductDetailsAddToCartButton ThemeButton AddToCartThemeButton ProductDetailsAddToCartThemeButton">

Category Page Add to Cart Button:
<input type="submit" name="dlCategory$ctl00$btnAddToCart" value="Add To Cart" id="dlCategory_ctl00_btnAddToCart" class="CategoryProductAddToCart ThemeButton AddToCartThemeButton CategoryAddToCartThemeButton">

Notice the different classes available on these 2 buttons.

Another common use of this technique is the GO button. The GO button is used in several places on the site including Search box, Mailing List, Shipping Estimation, Etc. These all have the shared class .GoThemeButton but then also have the separate classes .MailingListGoThemeButton, .SearchGoThemeButton, .ShoppingCartGoThemeButton which can be used for each button.


Using an Image for a button


If you wish to use an image for a button you'll need to upload that image to your server and set it as the background image of the button. You'll also need to hide the default text of the button. The css is below:



Make note of the dimensions of the button's image, you'll need to specify the width and height of the button

.ProductDetailsAddToCartThemeButton { 
background-image: url('/Shared/Themes/Element/Buttons/addtocart.png');
width: 202px;
height: 76px;
padding:0;
/*this will remove the default text from the image. */
font-size:0;
color:transparent;
line-height:0;
letter-spacing:1000px;
}

 

 

Have more questions? Submit a request

Comments

Please sign in to leave a comment.