Background and Buttons

Buttons

There are two button types: "Add to cart" button (the "Checkout" button in the cart page is the same) and any other button.

.PSD source for buttons: Download

There are images in the [YourMagentoDir] /skin / frontend / default / [bluescale] / images / folder:

add_btn_split.gif = "Add to cart" button on the product page

blue_btn_split.gif = blue buttons in the catalog

r_arr_btn_split.gif = checkout button

l_arr_btn_split.gif = button with left arrow on the checkout page

In order to change button text color open [YourMagentoDir] / skin / frontend / default / [bluescale] / css / skin.css and find the following code.

"Add to cart" button, line 1352

/********** add to cart button ************/
.product-shop .add-to-cart button.button span {
    position: relative;
    display: block;
    white-space: nowrap;
    border: 0 !important;
    background: none !important;
    height:25px;
    font: 14px/25px "Trebuchet MS", Arial, Helvetica, sans-serif;
    padding: 0;
    margin: 0;
}
/* OPTIONAL BUTTON STYLES for applying custom look and feel: */
.product-shop .add-to-cart button.button {
    float: none;
 $float: left;
    display: block;
    padding: 0 15px 0 0;
    font: 14px/25px "Trebuchet MS", Arial, Helvetica, sans-serif;
    text-align: center;
    background: transparent url(../images/add_btn_split.gif) no-repeat right -33px;
    height: 25px !important;
}
.product-shop .add-to-cart button.button span span {
    padding: 3px 0 0 30px;
    height: 25px;
    background: transparent url(../images/add_btn_split.gif) no-repeat left top !important;
    border: 0 !important;
    color: #fff;
    font: bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
    text-transform: none;
}
.product-shop .add-to-cart button.button:hover, .product-shop .add-to-cart button.buttonHover { /* the redundant class is used to apply the hover state with a script */
    background-position: right -99px;
}
.product-shop .add-to-cart button.button:hover span span, .product-shop .add-to-cart button.buttonHover span span {
    background-position: 0 -66px !important;
}

Blue button, line 1215

.products-grid button.button, .products-list button.button, .add-to-cart button.button, .crosssell button.button, .compare-table button.button, .checkout-onepage-index button.button {
    padding: 0 11px 0 0;
    font-size: 11px;
    text-align: center;
    background: transparent url(../images/blue_btn_split.gif) no-repeat right -31px;
    height: 21px !important;
}
.products-grid button.button span span, .products-list button.button span span, .add-to-cart button.button span span, .crosssell button.button span span, .compare-table button.button span span, .checkout-onepage-index button.button span span {
    padding: 1px 0 0 11px;
    height: 21px;
    background: transparent url(../images/blue_btn_split.gif) no-repeat left top !important;
    border: 0 !important;
    color: #fff;
    text-transform: none;
}
.products-grid button.button:hover, .products-grid button.buttonHover, .products-list button.button:hover, .products-list button.buttonHover, .add-to-cart button.button:hover, .add-to-cart button.buttonHover, .crosssell button.button:hover, .crosssell button.buttonHover, .compare-table button.button:hover, .compare-table button.buttonHover, .checkout-onepage-index button.buttonHover, .checkout-onepage-index button.button:hover { /* the redundant class is used to apply the hover state with a script */
    background-position: right -93px;
}
.products-grid button.button:hover span span, .products-grid button.buttonHover span span, .products-list button.button:hover span span, .products-list button.buttonHover span span, .add-to-cart button.button:hover span span, .add-to-cart button.buttonHover span span, .crosssell button.button:hover span span, .crosssell button.buttonHover span span, .compare-table button.button:hover span span, .compare-table button.buttonHover span span, .checkout-onepage-index button.buttonHover span span, .checkout-onepage-index button.button:hover span span {
    background-position: 0 -62px !important;
}

Checkout button, line 1236

.checkout-types button.button span, #checkout-review-submit button.button span {
    position: relative;
    display: block;
    white-space: nowrap;
    border: 0 !important;
    background: none !important;
    height:25px;
    font-size: 14px/25px;
    padding: 0;
    margin: 0;
}
 @media screen and (-webkit-min-device-pixel-ratio:0) {
    /* Safari and Google Chrome only - fix margins */
    .checkout-types button.button span {
 margin-top: -1px;
}
}
/* OPTIONAL BUTTON STYLES for applying custom look and feel: */
.checkout-types button.button, #checkout-review-submit button.button {
    padding: 0 26px 0 0;
    font-size: 14px/25px;
    text-align: center;
    background: transparent url(../images/r_arr_btn_split.gif) no-repeat right -33px;
    height: 25px !important;
}
.checkout-types button.button span span, #checkout-review-submit button.button span span {
    padding: 3px 0 0 17px;
    height: 25px;
    background: transparent url(../images/r_arr_btn_split.gif) no-repeat left top !important;
    border: 0 !important;
    color: #fff;
    font: bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
    text-transform: none;
}
.checkout-types button.button:hover, button.buttonHover, #checkout-review-submit button.button:hover { /* the redundant class is used to apply the hover state with a script */
    background-position: right -99px;
}
.checkout-types button.button:hover span span, button.buttonHover span span, #checkout-review-submit button.button:hover span span {
    background-position: 0 -66px !important;
}

Feel free to make changes.

Background

In order to change the background open /[YourMagentoDir]/skin/frontend/default/[YourSkin]/css/skin.css, and add the following code to the end of skin.css file.

body { background: url(../images/bg_blue.gif) repeat 0 0; }
body { background: url(../images/bg_grey.gif) repeat 0 0; }
body{ background: url(../images/bg_white.gif) repeat 0 0; }
body { background: url(../images/bg_flower.jpg) repeat 50% 0; }
body { background: #aaaaaa url(../images/bg_nt.gif) repeat-x 0 0; }