Introduction

While we don't offer support to users for coding their site, we can show you a few different ways you can style the buttons.

If you're not comfortable with CSS, we recommend you find a CSS developer on Fiverr or Upwork.

Note: Add this CSS to your page. If you don't know how to do this, please contact a CSS developer or buy our custom web design help package starting at $80 USD.

Use the WordPress Customize CSS feature to style the class of "scc-usr-act-btns"

How do I install the custom CSS code?

Method 1 - Manual - https://prnt.sc/vnetr8
Method 2 - Global WordPress Custom CSS - https://prnt.sc/vneuo2

How do Style Individual Buttons?

Email Quote Button =  .scc-email-quote-btn
View Detailed List Button =  .scc-detailed-list-btn
Coupon Button =  .scc-enter-coupon-btn
Add To Cart Button =  .scc-add-to-cart-btn


----------------------------------------------------------------------------------------------------------------------------------------

What are some examples?

Use one or more of the styles below. You may combine the different options below.



/* Make One Button Your Main Action Button */

.scc-detailed-list-btn{

     background: transparent!important;

     color: #000!important; text-decoration:underline;font-weight:bold;

 }

.scc-enter-coupon-btn{

     background: transparent!important;

     color: #000!important;text-decoration:underline;font-weight:bold;

  }

.scc-email-quote-btn {

   background: linear-gradient(to right, #f1bc3f, #eaa709) !important;

 }


--------------------------------------------------------------------

/* Smaller, Square & Dashed Border */

.scc-usr-act-btns {

    padding: 7px !important;

    outline: 2px dashed orange;
border-radius: 2px !important;

}

--------------------------------------------------------------------

/* Border Shadow */

.scc-usr-act-btns {
box-shadow: 0 9px #F9F9F9;
}


--------------------------------------------------------------------

/* Bordder Bottom Color */

    .scc-usr-act-btns {

        border-bottom: orange 2px solid;

    }

--------------------------------------------------------------------

/* Gradient for Max Attention */

.scc-usr-act-btns {

   border-radius: 4px;

   background: linear-gradient(to right, #d70846, #82052a) !important;

   border: none;

   color: #FFFFFF;

   text-align: center;

   text-transform: uppercase;

   font-size: 22px;

   padding: 20px;

   width: 200px;

   transition: all 0.4s;

   cursor: pointer;

   margin: 5px;
}
--------------------------------------------------------------------

/* Bigger Button and under the Total Price */

.scc-usr-act-btns.printTable-1 {

    font-weight: bold;

    font-size: 18px;

    padding: 10px;

    width: 180px;

}

.row.scc-btn-hndle {

    position: absolute;

    /* top: 700px; */

    padding-top: 70px;

}



--------------------------------------------------------------------

/* Square Buttons*/

.scc-usr-act-btns {

    border-radius: 2px !important;

}


--------------------------------------------------------------------

/* Stroke (Outline) */

.scc-usr-act-btns {

    outline: 2px solid orange;

}