How to: Change the Pricing Tables Button Color

To change the color of the Pricing Tables button add one of the following codes for your choice of color to the Custom CSS area in Site Options Panel. Appearance > Site Options > Styling Options > Custom CSS ALPHA GREEN:

 .uds-pricing-table .small_button { box-shadow:none; border-top: 1px solid #7BB5A9; background-color: #035A48; background-image: linear-gradient(to bottom, #38917F, #035A48); /* required first in the list for IE11 */ background-image: -webkit-gradient(linear, left top, left bottom, from(#38917F), to(#035A48)); background-image: -webkit-linear-gradient(top, #38917F, #035A48); background-image: -moz-linear-gradient(top, #38917F, #035A48); background-image: -webkit-linear-gradient(top, #38917F, #035A48); background-image: -o-linear-gradient(top, #38917F, #035A48); background-image: ms-linear-gradient(to bottom, #38917F, #035A48); -pie-background: linear-gradient(to bottom, #38917F, #035A48); } 

AUTUMN:

 .uds-pricing-table .small_button { box-shadow:none; border-top: 1px solid #AA5D2F; background-color: #19292E; background-image: linear-gradient(to bottom, #92400E, #651605); /* required first in the list for IE11 */ background-image: -webkit-gradient(linear, left top, left bottom, from(#92400E), to(#651605)); background-image: -webkit-linear-gradient(top, #92400E, #651605); background-image: -moz-linear-gradient(top, #92400E, #651605); background-image: -webkit-linear-gradient(top, #92400E, #651605); background-image: -o-linear-gradient(top, #92400E, #651605); background-image: ms-linear-gradient(to bottom, #92400E, #651605); -pie-background: linear-gradient(to bottom, #92400E, #651605); 

BLUE GREY:

 .uds-pricing-table .small_button{ box-shadow:none; border-top: 1px solid #707180; background-color: #2E2D3D; background-image: linear-gradient(to bottom, #606173, #2E2D3D); /* required first in the list for IE11 */ background-image: -webkit-gradient(linear, left top, left bottom, from(#606173), to(#2E2D3D)); background-image: -webkit-linear-gradient(top, #606173, #2E2D3D); background-image: -moz-linear-gradient(top, #606173, #2E2D3D); background-image: -webkit-linear-gradient(top, #606173, #2E2D3D); background-image: -o-linear-gradient(top, #606173, #2E2D3D); background-image: ms-linear-gradient(to bottom, #606173, #2E2D3D); -pie-background: linear-gradient(to bottom, #606173, #2E2D3D); } 

BUOY RED:

 .uds-pricing-table .small_button { box-shadow:none; border-top: 1px solid #D56566; background-color: #951112; background-image: linear-gradient(to bottom, #CE4A4B, #951112); /* required first in the list for IE11 */ background-image: -webkit-gradient(linear, left top, left bottom, from(#CE4A4B), to(#951112)); background-image: -webkit-linear-gradient(top, #CE4A4B, #951112); background-image: -moz-linear-gradient(top, #CE4A4B, #951112); background-image: -webkit-linear-gradient(top, #CE4A4B, #951112); background-image: -o-linear-gradient(top, #CE4A4B, #951112); background-image: ms-linear-gradient(to bottom, #CE4A4B, #951112); -pie-background: linear-gradient(to bottom, #CE4A4B, #951112); } 

CHERRY:

 .uds-pricing-table .small_button { box-shadow:none; border-top: 1px solid #E41E04; background-color: #670600; background-image: linear-gradient(to bottom, #BA1A00, #670600); /* required first in the list for IE11 */ background-image: -webkit-gradient(linear, left top, left bottom, from(#BA1A00), to(#670600)); background-image: -webkit-linear-gradient(top, #BA1A00, #670600); background-image: -moz-linear-gradient(top, #BA1A00, #670600); background-image: -webkit-linear-gradient(top, #BA1A00, #670600); background-image: -o-linear-gradient(top, #BA1A00, #670600); background-image: ms-linear-gradient(to bottom, #BA1A00, #670600); -pie-background: linear-gradient(to bottom, #BA1A00, #670600); } 

COFFEE:

 .uds-pricing-table .small_button { box-shadow:none; border-top: 1px solid #76685D; background-color: #28211B; background-image: linear-gradient(to bottom, #584A3F, #28211B); /* required first in the list for IE11 */ background-image: -webkit-gradient(linear, left top, left bottom, from(#584A3F), to(#28211B)); background-image: -webkit-linear-gradient(top, #584A3F, #28211B); background-image: -moz-linear-gradient(top, #584A3F, #28211B); background-image: -webkit-linear-gradient(top, #584A3F, #28211B); background-image: -o-linear-gradient(top, #584A3F, #28211B); background-image: ms-linear-gradient(to bottom, #584A3F, #28211B); -pie-background: linear-gradient(to bottom, #584A3F, #28211B); } 

COOL-BLUE:

 .uds-pricing-table .small_button { box-shadow:none; border-top: 1px solid #00A2ED; background-color: #003869; background-image: linear-gradient(to bottom, #007CB7, #003869); /* required first in the list for IE11 */ background-image: -webkit-gradient(linear, left top, left bottom, from(#007CB7), to(#003869)); background-image: -webkit-linear-gradient(top, #007CB7, #003869); background-image: -moz-linear-gradient(top, #007CB7, #003869); background-image: -webkit-linear-gradient(top, #007CB7, #003869); background-image: -o-linear-gradient(top, #007CB7, #003869); background-image: ms-linear-gradient(to bottom, #007CB7, #003869); -pie-background: linear-gradient(to bottom, #007CB7, #003869); } 

DARK:

 .uds-pricing-table .small_button { box-shadow:none; border-top: 1px solid #4F4F5B; background-color: #0F0F0F; background-image: linear-gradient(to bottom, #3B3B47, #0F0F0F); /* required first in the list for IE11 */ background-image: -webkit-gradient(linear, left top, left bottom, from(#3B3B47), to(#0F0F0F)); background-image: -webkit-linear-gradient(top, #3B3B47, #0F0F0F); background-image: -moz-linear-gradient(top, #3B3B47, #0F0F0F); background-image: -webkit-linear-gradient(top, #3B3B47, #0F0F0F); background-image: -o-linear-gradient(top, #3B3B47, #0F0F0F); background-image: ms-linear-gradient(to bottom, #3B3B47, #0F0F0F); -pie-background: linear-gradient(to bottom, #3B3B47, #0F0F0F); } 

FIRE:

 .uds-pricing-table .small_button { box-shadow:none; border-top: 1px solid #F8914C; background-color: #DB3C02; background-image: linear-gradient(to bottom, #F37F32, #DB3C02); /* required first in the list for IE11 */ background-image: -webkit-gradient(linear, left top, left bottom, from(#F37F32), to(#DB3C02)); background-image: -webkit-linear-gradient(top, #F37F32, #DB3C02); background-image: -moz-linear-gradient(top, #F37F32, #DB3C02); background-image: -webkit-linear-gradient(top, #F37F32, #DB3C02); background-image: -o-linear-gradient(top, #F37F32, #DB3C02); background-image: ms-linear-gradient(to bottom, #F37F32, #DB3C02); -pie-background: linear-gradient(to bottom, #F37F32, #DB3C02); } 

FOREST GREEN:

 .uds-pricing-table .small_button { box-shadow:none; border-top: 1px solid #8AA449; background-color: #354516; background-image: linear-gradient(to bottom, #71893B, #354516); /* required first in the list for IE11 */ background-image: -webkit-gradient(linear, left top, left bottom, from(#71893B), to(#354516)); background-image: -webkit-linear-gradient(top, #71893B, #354516); background-image: -moz-linear-gradient(top, #71893B, #354516); background-image: -webkit-linear-gradient(top, #71893B, #354516); background-image: -o-linear-gradient(top, #71893B, #354516); background-image: ms-linear-gradient(to bottom, #71893B, #354516); -pie-background: linear-gradient(to bottom, #71893B, #354516); } 

FRENCH GREEN:

 .uds-pricing-table .small_button { box-shadow:none; border-top: 1px solid #B4D2CD; background-color: #58837C; background-image: linear-gradient(to bottom, #93BEB7, #58837C); /* required first in the list for IE11 */ background-image: -webkit-gradient(linear, left top, left bottom, from(#93BEB7), to(#58837C)); background-image: -webkit-linear-gradient(top, #93BEB7, #58837C); background-image: -moz-linear-gradient(top, #93BEB7, #58837C); background-image: -webkit-linear-gradient(top, #93BEB7, #58837C); background-image: -o-linear-gradient(top, #93BEB7, #58837C); background-image: ms-linear-gradient(to bottom, #93BEB7, #58837C); -pie-background: linear-gradient(to bottom, #93BEB7, #58837C); } 

GOLDEN:

 .uds-pricing-table .small_button { box-shadow:none; border-top: 1px solid #D8BD64; background-color: #81570D; background-image: linear-gradient(to bottom, #BFA12F, #81570D); /* required first in the list for IE11 */ background-image: -webkit-gradient(linear, left top, left bottom, from(#BFA12F), to(#81570D)); background-image: -webkit-linear-gradient(top, #BFA12F, #81570D); background-image: -moz-linear-gradient(top, #BFA12F, #81570D); background-image: -webkit-linear-gradient(top, #BFA12F, #81570D); background-image: -o-linear-gradient(top, #BFA12F, #81570D); background-image: ms-linear-gradient(to bottom, #BFA12F, #81570D); -pie-background: linear-gradient(to bottom, #BFA12F, #81570D); } 

GREY:

 .uds-pricing-table .small_button { box-shadow:none; border-top: 1px solid #717880; background-color: #2A3139; background-image: linear-gradient(to bottom, #565D65, #2A3139); /* required first in the list for IE11 */ background-image: -webkit-gradient(linear, left top, left bottom, from(#565D65), to(#2A3139)); background-image: -webkit-linear-gradient(top, #565D65, #2A3139); background-image: -moz-linear-gradient(top, #565D65, #2A3139); background-image: -webkit-linear-gradient(top, #565D65, #2A3139); background-image: -o-linear-gradient(top, #565D65, #2A3139); background-image: ms-linear-gradient(to bottom, #565D65, #2A3139); -pie-background: linear-gradient(to bottom, #565D65, #2A3139); } 

LIME GREEN:

 .uds-pricing-table .small_button { box-shadow:none; border-top: 1px solid #D3DA68; background-color: #638401; background-image: linear-gradient(to bottom, #B2C303, #638401); /* required first in the list for IE11 */ background-image: -webkit-gradient(linear, left top, left bottom, from(#B2C303), to(#638401)); background-image: -webkit-linear-gradient(top, #B2C303, #638401); background-image: -moz-linear-gradient(top, #B2C303, #638401); background-image: -webkit-linear-gradient(top, #B2C303, #638401); background-image: -o-linear-gradient(top, #B2C303, #638401); background-image: ms-linear-gradient(to bottom, #B2C303, #638401); -pie-background: linear-gradient(to bottom, #B2C303, #638401); 

ORANGE:

 .uds-pricing-table .small_button { box-shadow:none; border-top: 1px solid #FEBF62; background-color: #CA6A00; background-image: linear-gradient(to bottom, #FDA41E, #CA6A00); /* required first in the list for IE11 */ background-image: -webkit-gradient(linear, left top, left bottom, from(#FDA41E), to(#CA6A00)); background-image: -webkit-linear-gradient(top, #FDA41E, #CA6A00); background-image: -moz-linear-gradient(top, #FDA41E, #CA6A00); background-image: -webkit-linear-gradient(top, #FDA41E, #CA6A00); background-image: -o-linear-gradient(top, #FDA41E, #CA6A00); background-image: ms-linear-gradient(to bottom, #FDA41E, #CA6A00); -pie-background: linear-gradient(to bottom, #FDA41E, #CA6A00); } 

PERIWINKLE:

 .uds-pricing-table .small_button { box-shadow:none; border-top: 1px solid #7589C8; background-color: #4C1267; background-image: linear-gradient(to bottom, #596CB1, #4C1267); /* required first in the list for IE11 */ background-image: -webkit-gradient(linear, left top, left bottom, from(#596CB1), to(#4C1267)); background-image: -webkit-linear-gradient(top, #596CB1, #4C1267); background-image: -moz-linear-gradient(top, #596CB1, #4C1267); background-image: -webkit-linear-gradient(top, #596CB1, #4C1267); background-image: -o-linear-gradient(top, #596CB1, #4C1267); background-image: ms-linear-gradient(to bottom, #596CB1, #4C1267); -pie-background: linear-gradient(to bottom, #596CB1, #4C1267); } 

PINK:

 .uds-pricing-table .small_button { box-shadow:none; border-top: 1px solid #BD689C; background-color: #6D1F49; background-image: linear-gradient(to bottom, #B14D8B, #6D1F49); /* required first in the list for IE11 */ background-image: -webkit-gradient(linear, left top, left bottom, from(#B14D8B), to(#6D1F49)); background-image: -webkit-linear-gradient(top, #B14D8B, #6D1F49); background-image: -moz-linear-gradient(top, #B14D8B, #6D1F49); background-image: -webkit-linear-gradient(top, #B14D8B, #6D1F49); background-image: -o-linear-gradient(top, #B14D8B, #6D1F49); background-image: ms-linear-gradient(to bottom, #B14D8B, #6D1F49); -pie-background: linear-gradient(to bottom, #B14D8B, #6D1F49);	 } 

POLITICAL BLUE:

 .uds-pricing-table .small_button { box-shadow:none; border-top: 1px solid #4B8CA8; background-color: #013558; background-image: linear-gradient(to bottom, #1E6F92, #013558); /* required first in the list for IE11 */ background-image: -webkit-gradient(linear, left top, left bottom, from(#1E6F92), to(#013558)); background-image: -webkit-linear-gradient(top, #1E6F92, #013558); background-image: -moz-linear-gradient(top, #1E6F92, #013558); background-image: -webkit-linear-gradient(top, #1E6F92, #013558); background-image: -o-linear-gradient(top, #1E6F92, #013558); background-image: ms-linear-gradient(to bottom, #1E6F92, #013558); -pie-background: linear-gradient(to bottom, #1E6F92, #013558); } 

PURPLE:

 .uds-pricing-table .small_button { box-shadow:none; border-top: 1px solid #B75683; background-color: #371022; background-image: linear-gradient(to bottom, #863C5F, #371022); /* required first in the list for IE11 */ background-image: -webkit-gradient(linear, left top, left bottom, from(#863C5F), to(#371022)); background-image: -webkit-linear-gradient(top, #863C5F, #371022); background-image: -moz-linear-gradient(top, #863C5F, #371022); background-image: -webkit-linear-gradient(top, #863C5F, #371022); background-image: -o-linear-gradient(top, #863C5F, #371022); background-image: ms-linear-gradient(to bottom, #863C5F, #371022); -pie-background: linear-gradient(to bottom, #863C5F, #371022); } 

ROYAL BLUE:

 .uds-pricing-table .small_button { box-shadow:none; border-top: 1px solid #496D9D; background-color: #182947; background-image: linear-gradient(to bottom, #375885, #182947); /* required first in the list for IE11 */ background-image: -webkit-gradient(linear, left top, left bottom, from(#375885), to(#182947)); background-image: -webkit-linear-gradient(top, #375885, #182947); background-image: -moz-linear-gradient(top, #375885, #182947); background-image: -webkit-linear-gradient(top, #375885, #182947); background-image: -o-linear-gradient(top, #375885, #182947); background-image: ms-linear-gradient(to bottom, #375885, #182947); -pie-background: linear-gradient(to bottom, #375885, #182947); } 

SAFFRON BLUE:

 .uds-pricing-table .small_button { box-shadow:none; border-top: 1px solid #8595A1; background-color: #2E4250; background-image: linear-gradient(to bottom, #677B89, #2E4250); /* required first in the list for IE11 */ background-image: -webkit-gradient(linear, left top, left bottom, from(#677B89), to(#2E4250)); background-image: -webkit-linear-gradient(top, #677B89, #2E4250); background-image: -moz-linear-gradient(top, #677B89, #2E4250); background-image: -webkit-linear-gradient(top, #677B89, #2E4250); background-image: -o-linear-gradient(top, #677B89, #2E4250); background-image: ms-linear-gradient(to bottom, #677B89, #2E4250); -pie-background: linear-gradient(to bottom, #677B89, #2E4250); } 

SILVER:

 .uds-pricing-table .small_button { box-shadow:none; border-top: 1px solid #EFEFEF; background-color: #757575; background-image: linear-gradient(to bottom, #BFBFBF, #757575); /* required first in the list for IE11 */ background-image: -webkit-gradient(linear, left top, left bottom, from(#BFBFBF), to(#757575)); background-image: -webkit-linear-gradient(top, #BFBFBF, #757575); background-image: -moz-linear-gradient(top, #BFBFBF, #757575); background-image: -webkit-linear-gradient(top, #BFBFBF, #757575); background-image: -o-linear-gradient(top, #BFBFBF, #757575); background-image: ms-linear-gradient(to bottom, #BFBFBF, #757575); -pie-background: linear-gradient(to bottom, #BFBFBF, #757575); } 

SKY BLUE:

 .uds-pricing-table .small_button { box-shadow:none; border-top: 1px solid #32C4DD; background-color: #0077AF; background-image: linear-gradient(to bottom, #01B2D3, #0077AF); /* required first in the list for IE11 */ background-image: -webkit-gradient(linear, left top, left bottom, from(#01B2D3), to(#0077AF)); background-image: -webkit-linear-gradient(top, #01B2D3, #0077AF); background-image: -moz-linear-gradient(top, #01B2D3, #0077AF); background-image: -webkit-linear-gradient(top, #01B2D3, #0077AF); background-image: -o-linear-gradient(top, #01B2D3, #0077AF); background-image: ms-linear-gradient(to bottom, #01B2D3, #0077AF); -pie-background: linear-gradient(to bottom, #01B2D3, #0077AF); } 

STEEL GREEN:

 .uds-pricing-table .small_button { box-shadow:none; border-top: 1px solid #88A4A9; background-color: #30535A; background-image: linear-gradient(to bottom, #6A8D94, #30535A); /* required first in the list for IE11 */ background-image: -webkit-gradient(linear, left top, left bottom, from(#6A8D94), to(#30535A)); background-image: -webkit-linear-gradient(top, #6A8D94, #30535A); background-image: -moz-linear-gradient(top, #6A8D94, #30535A); background-image: -webkit-linear-gradient(top, #6A8D94, #30535A); background-image: -o-linear-gradient(top, #6A8D94, #30535A); background-image: ms-linear-gradient(to bottom, #6A8D94, #30535A); -pie-background: linear-gradient(to bottom, #6A8D94, #30535A); } 

TEAL GREY:

 .uds-pricing-table .small_button { box-shadow:none; border-top: 1px solid #4E646D; background-color: #19292E; background-image: linear-gradient(to bottom, #3A525C, #19292E); /* required first in the list for IE11 */ background-image: -webkit-gradient(linear, left top, left bottom, from(#3A525C), to(#19292E)); background-image: -webkit-linear-gradient(top, #3A525C, #19292E); background-image: -moz-linear-gradient(top, #3A525C, #19292E); background-image: -webkit-linear-gradient(top, #3A525C, #19292E); background-image: -o-linear-gradient(top, #3A525C, #19292E); background-image: ms-linear-gradient(to bottom, #3A525C, #19292E); -pie-background: linear-gradient(to bottom, #3A525C, #19292E); } 

TEAL:

 .uds-pricing-table .small_button { box-shadow:none; border-top: 1px solid #58BFAE; background-color: #0D4E54; background-image: linear-gradient(to bottom, #45988E, #0D4E54); /* required first in the list for IE11 */ background-image: -webkit-gradient(linear, left top, left bottom, from(#45988E), to(#0D4E54)); background-image: -webkit-linear-gradient(top, #45988E, #0D4E54); background-image: -moz-linear-gradient(top, #45988E, #0D4E54); background-image: -webkit-linear-gradient(top, #45988E, #0D4E54); background-image: -o-linear-gradient(top, #45988E, #0D4E54); background-image: ms-linear-gradient(to bottom, #45988E, #0D4E54); -pie-background: linear-gradient(to bottom, #45988E, #0D4E54); } 

TUF GREEN:

 .uds-pricing-table .small_button { box-shadow:none; border-top: 1px solid #969997; background-color: #3D403E; background-image: linear-gradient(to bottom, #7C807D, #3D403E); /* required first in the list for IE11 */ background-image: -webkit-gradient(linear, left top, left bottom, from(#7C807D), to(#3D403E)); background-image: -webkit-linear-gradient(top, #7C807D, #3D403E); background-image: -moz-linear-gradient(top, #7C807D, #3D403E); background-image: -webkit-linear-gradient(top, #7C807D, #3D403E); background-image: -o-linear-gradient(top, #7C807D, #3D403E); background-image: ms-linear-gradient(to bottom, #7C807D, #3D403E); -pie-background: linear-gradient(to bottom, #7C807D, #3D403E); } 

VIOLET:

 .uds-pricing-table .small_button { box-shadow:none; border-top: 1px solid #9C54E4; background-color: #3E1966; background-image: linear-gradient(to bottom, #7D2FD3, #3E1966); /* required first in the list for IE11 */ background-image: -webkit-gradient(linear, left top, left bottom, from(#7D2FD3), to(#3E1966)); background-image: -webkit-linear-gradient(top, #7D2FD3, #3E1966); background-image: -moz-linear-gradient(top, #7D2FD3, #3E1966); background-image: -webkit-linear-gradient(top, #7D2FD3, #3E1966); background-image: -o-linear-gradient(top, #7D2FD3, #3E1966); background-image: ms-linear-gradient(to bottom, #7D2FD3, #3E1966); -pie-background: linear-gradient(to bottom, #7D2FD3, #3E1966); } 

VISTA BLUE:

 .uds-pricing-table .small_button { box-shadow:none; border-top: 1px solid #7CD2DB; background-color: #168995; background-image: linear-gradient(to bottom, #50C3CF, #168995); /* required first in the list for IE11 */ background-image: -webkit-gradient(linear, left top, left bottom, from(#50C3CF), to(#168995)); background-image: -webkit-linear-gradient(top, #50C3CF, #168995); background-image: -moz-linear-gradient(top, #50C3CF, #168995); background-image: -webkit-linear-gradient(top, #50C3CF, #168995); background-image: -o-linear-gradient(top, #50C3CF, #168995); background-image: ms-linear-gradient(to bottom, #50C3CF, #168995); -pie-background: linear-gradient(to bottom, #50C3CF, #168995); } 

YOGI GREEN:

 .uds-pricing-table .small_button { box-shadow:none; border-top: 1px solid #D0D9C3; background-color: #818E6D; background-image: linear-gradient(to bottom, #BBC8A7, #818E6D); /* required first in the list for IE11 */ background-image: -webkit-gradient(linear, left top, left bottom, from(#BBC8A7), to(#818E6D)); background-image: -webkit-linear-gradient(top, #BBC8A7, #818E6D); background-image: -moz-linear-gradient(top, #BBC8A7, #818E6D); background-image: -webkit-linear-gradient(top, #BBC8A7, #818E6D); background-image: -o-linear-gradient(top, #BBC8A7, #818E6D); background-image: ms-linear-gradient(to bottom, #BBC8A7, #818E6D); -pie-background: linear-gradient(to bottom, #BBC8A7, #818E6D); } 

You may also change the color of the button’s font. To do so, add the following code:

.uds-pricing-table .small_button span {color:#FFF !important;}

Change the color code as needed.