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;
}
--------------------------------------------------------------------
/* 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
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article