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

   ```css

/* 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;

}``

---
    
```css
/* Stroke (Outline) */
.scc-usr-act-btns {
   outline: 2px solid orange;
}```  
    
**All Elements & Features**  
  
Learn more about [All Elements](https://help.stylishcostcalculator.com/en/category/stylish-cost-calculator-pobkkb/)  
Learn more about [All Features](https://help.stylishcostcalculator.com/en/category/stylish-cost-calculator-pobkkb/)  
  
**Need Support?**  
  
Ask a [question or request support](https://stylishcostcalculator.com/support/)  
Request [a feature or give feedback](https://stylishcostcalculator.com/how-can-we-be-better/)

Updated on: 21/06/2024