Changing the Color of Contact Form Button

To change the color of the “Submit” button in the Contact Form, add one of the following codes for your choice of color to the Custom CSS area in Site Options > Styling Options:

ALPHA GREEN:

 #ka-submit, .ka-form-submit, .contact-form .ka-form-submit { 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:

#ka-submit, .ka-form-submit, .contact-form .ka-form-submit { 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:

#ka-submit, .ka-form-submit, .contact-form .ka-form-submit { 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:

#ka-submit, .ka-form-submit, .contact-form .ka-form-submit { 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:

#ka-submit, .ka-form-submit, .contact-form .ka-form-submit { 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:

#ka-submit, .ka-form-submit, .contact-form .ka-form-submit { 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:

#ka-submit, .ka-form-submit, .contact-form .ka-form-submit { 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:

#ka-submit, .ka-form-submit, .contact-form .ka-form-submit { 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:

#ka-submit, .ka-form-submit, .contact-form .ka-form-submit { 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:

#ka-submit, .ka-form-submit, .contact-form .ka-form-submit { 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:

#ka-submit, .ka-form-submit, .contact-form .ka-form-submit { 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:

#ka-submit, .ka-form-submit, .contact-form .ka-form-submit { 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:

#ka-submit, .ka-form-submit, .contact-form .ka-form-submit { 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:

#ka-submit, .ka-form-submit, .contact-form .ka-form-submit { 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:

#ka-submit, .ka-form-submit, .contact-form .ka-form-submit { 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:

#ka-submit, .ka-form-submit, .contact-form .ka-form-submit { 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:

#ka-submit, .ka-form-submit, .contact-form .ka-form-submit { 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:

#ka-submit, .ka-form-submit, .contact-form .ka-form-submit { 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:

#ka-submit, .ka-form-submit, .contact-form .ka-form-submit { 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:

#ka-submit, .ka-form-submit, .contact-form .ka-form-submit { 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:

#ka-submit, .ka-form-submit, .contact-form .ka-form-submit { 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:

#ka-submit, .ka-form-submit, .contact-form .ka-form-submit { 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:

#ka-submit, .ka-form-submit, .contact-form .ka-form-submit { 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:

#ka-submit, .ka-form-submit, .contact-form .ka-form-submit { 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:

#ka-submit, .ka-form-submit, .contact-form .ka-form-submit { 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:

#ka-submit, .ka-form-submit, .contact-form .ka-form-submit { 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:

#ka-submit, .ka-form-submit, .contact-form .ka-form-submit { 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:

#ka-submit, .ka-form-submit, .contact-form .ka-form-submit { 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:

#ka-submit, .ka-form-submit, .contact-form .ka-form-submit { 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:

#ka-submit, .ka-form-submit, .contact-form .ka-form-submit { 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:

#ka-submit, .ka-form-submit, .contact-form .ka-form-submit {color:#FFF !important;}

Change the color code as needed.