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

Created by Mike B, Modified on Mon, 21 Aug, 2023 at 1:11 PM by Angel Mavare

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

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article