Articles on: Tutorials (how to)

How do I style my 'Email Quote', 'Detailed List' or 'Coupon' Buttons?

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

Was this article helpful?

Share your feedback

Cancel

Thank you!