Archived topic

Button border width

5 replies · Started by Ivan on August 22, 2020

Viewing posts 1–6 of 6

August 22, 2020 at 11:12 am #1414087

Hello,

I am trying to give the same look and feel to all buttons on my site. I am struggling a bit with the HappyForms 'Send' button. The code below works, just the border-width (border-width: 2px !important;) remains unchanged:

body input[type=submit].happyforms-button--submit {
	border-style: solid !important;
	padding-top: 15px !important;
	padding-bottom: 15px !important;
	padding-left: 25px !important;
	padding-right: 25px !important;
	border-radius: 5px !important;
	border-width: 2px !important;
	font-size: 20px !important;
	transition:.2s background-color ease-in-out, .2s color ease-in-out, .2s border-color ease-in-out, .2s opacity ease-in-out, .2s box-shadow ease-in-out !important;
}

Any idea what could be wrong here?

Thank you,
Ivan

August 22, 2020 at 11:41 am #1414111

Hi there,

Try this:

.happyforms-styles input[type=submit].happyforms-button--submit {
    border-width: 2px !important;
}

If you use the browser inspector tool, you can see the CSS involved.

August 22, 2020 at 11:50 am #1414125

Hi Leo,

This also did not work. The border remains unchanged.

Could it be because the HappyForms CSS already sets border: 1px solid transparent !important;?

Thanks,
Ivan

August 22, 2020 at 11:52 am #1414129

It could be. You would need to try to overwrite that.

HappyForm's CSS are tough to overwrite so might be worth checking with their support team.

August 22, 2020 at 11:58 am #1414137

Will do, thanks! :)

August 22, 2020 at 11:59 am #1414139

No problem :)

This archived topic is closed to new replies.

Start building better websites today.