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;
 }

/* Edit secondary button text and icon colors */
/* Text */
.scc-secondary-btn-style{
     color: blue !important;
}

/* Icons */
.scc-secondary-btn-style .scc-fill{
     fill: blue !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;
}

`css
/*Square Buttons*/

.scc-usr-act-btns {
border-radius: 2px !important;

}

/* Stroke (Outline) */
.scc-usr-act-btns {
   outline: 2px solid orange;
}

All Elements & Features

Learn more about All Elements
Learn more about All Features

Need Support?

Ask a question or request support
Request a feature or give feedback

Updated on: 21/06/2024