How To: Customize The Button Color In Your Landing Pages

To change the subscribe button to your theme’s primary color (a setting in Web & IDX Website Settings) copy and paste the following code into your “Web & IDX” “Custom Header” settings:

<style>
  body.subscribe-form .btn-warning {
	background-color: hsla(var(--colorPrimary-h, 0),var(--colorPrimary-s, 0%),calc(var(--colorPrimary-l, 25%) + 0%),1);
	border-color: hsla(var(--colorPrimary-h, 0),var(--colorPrimary-s, 0%),calc(var(--colorPrimary-l, 25%) + 0%),1);
	box-shadow: hsla(var(--colorPrimary-h, 0),var(--colorPrimary-s, 0%),calc(var(--colorPrimary-l, 15%) + 0%),1);
	transition: .3s all linear;
}
body.subscribe-form .btn-warning:hover {
	background-color: hsla(var(--colorPrimary-h, 0),var(--colorPrimary-s, 0%),calc(var(--colorPrimary-l, 15%) + 0%),1);
	border-color: hsla(var(--colorPrimary-h, 0),var(--colorPrimary-s, 0%),calc(var(--colorPrimary-l, 15%) + 0%),1);
	box-shadow: hsla(var(--colorPrimary-h, 0),var(--colorPrimary-s, 0%),calc(var(--colorPrimary-l, 15%) + 0%),1);
}
</style>

To change the subscribe button to a color of your choice replace the hex color code in each instance below, then copy and paste the following code into your “Web & IDX” “Custom Header” settings:

<style>
  body.subscribe-form .btn-warning {
	background-color: #000;
	border-color: #000;
	box-shadow: #000;
	transition: .3s all linear;
}
body.subscribe-form .btn-warning:hover {
	background-color: #000;
	border-color: #000;
	box-shadow: #000;
}
</style>