Switching from Image Buttons to CSS Buttons

Joe - 

If you are using the built-in mobile interface (which uses separate header/footer) the CSS to accommodate buttons should already be in there.

If your goal is to go responsive, and want CSS buttons for your desktop as well, look to the Bootstrap CSS files for the following code and tailor as you see fit.  Or you can add this code to non-Bootstrap themes.

/* ===================

START: BUTTONS

=================== */

.pcButton {   

            display: inline-block;

            padding: 6px 12px;

            margin: 2px;

            white-space: nowrap;

            text-align: center;

            vertical-align: middle;

            cursor: pointer;

            -webkit-user-select: none;

            -moz-user-select: none;

                        -ms-user-select: none;

                                                user-select: none;

            background-image: none;

            border: 1px solid transparent;

            border-radius: 4px;

            text-decoration: none;

            text-transform: uppercase;

            box-shadow: 0 0 3px rgba(0, 0, 0, 0.42);

            border-color: #1A2874;

            text-shadow: none;

            background: #1F7A31;

            border-bottom: 4px solid #074E07;

            color: white;

}

a.pcButton {

            text-decoration: none;

    color: #FFFFFF !important;

}

.pcButton .pcButtonText {

            display: block !important;

            font-size: 14px;

            font-weight: 700;

            line-height: 1.42857143;

            color: #FFFFFF;

}

.pcButton img,

.pcButton input[type="image"] {

            display: none;

}

.pcButton:hover {

 

}

 

.pcButtonAddToCart {

 

}

.pcButtonAddToCart:hover {

 

}

.pcButtonAddToCart .pcButtonText {

 

}

 

.pcButtonMoreDetails {

            padding: 3px 6px !important;

}

.pcButtonMoreDetails:hover {

            padding: 3px 6px !important;

}

 

.pcButtonAddToCartSmall {

            padding: 3px 6px !important;

}

.pcButtonAddToCartSmall:hover {

            padding: 3px 6px !important;

}

.pcButtonMoreDetails .pcButtonText,

.pcButtonAddToCartSmall .pcButtonText {

            font-size: 12px !important;

            border-bottom-width: 3px;

}

 

.secondary {

 

}

.secondary:hover {

 

}

.secondary .pcButtonText {

 

}

 

 

.tiny {

            padding: 3px 6px !important;

}

.tiny .pcButtonText {

            font-size: 10px !important;

}

 

a.pcMoreLink {

            font-size: 15px;

            margin: 10px 0;

            display: inline-block;

}

 

/* ===================

END: BUTTONS

=================== */