ProductCart Shopping Cart Software Forums : Switching from Image Buttons to CSS Buttons https://forum.productcart.com/ Copyright (c) 2006-2013 Web Wiz Forums - All Rights Reserved. Fri, 10 Apr 2026 20:16:40 +0000 Tue, 11 Oct 2016 10:59:56 +0000 http://blogs.law.harvard.edu/tech/rss Web Wiz Forums 12.04 360 https://forum.productcart.com/RSS_post_feed.asp?TID=6093 <![CDATA[ProductCart Shopping Cart Software Forums]]> https://forum.productcart.com/forum_images/pc_logo_50.png https://forum.productcart.com/ <![CDATA[Switching from Image Buttons to CSS Buttons : Joe -If you are using the built-in...]]> https://forum.productcart.com/switching-from-image-buttons-to-css-buttons_topic6093_post22716.html#22716 Author: Greg Dinger
Subject: 6093
Posted: 11-October-2016 at 10:59am

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;

}

.pcButtonimg,

.pcButtoninput[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

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

]]> Tue, 11 Oct 2016 10:59:56 +0000 https://forum.productcart.com/switching-from-image-buttons-to-css-buttons_topic6093_post22716.html#22716 <![CDATA[Switching from Image Buttons to CSS Buttons : Is there any easier way to replace...]]> https://forum.productcart.com/switching-from-image-buttons-to-css-buttons_topic6093_post22715.html#22715 Author: BlackReefDesigns
Subject: 6093
Posted: 07-October-2016 at 6:44pm

Is there any easier way to replace the default image buttons in ProductCart than manually replace the inline image code with CSS class in the .ASP files?

Thanks,

]]> Fri, 07 Oct 2016 18:44:30 +0000 https://forum.productcart.com/switching-from-image-buttons-to-css-buttons_topic6093_post22715.html#22715