How to change color of "send"-button

Beaver Builder
1

Hey Ben,

i would like to change the color of the send-button (in german “senden”).

You can find that on:

If you wonder what I would like to change here …
… I would like to alter the black writing “Send” into white (compliant to the rest of design), remove the black border all around and as hovercolor I’d like a dark green tone # 0b7e2b.

Actually just like the “Abschicken”-button on:

Merci for timely feedback.

Tom

2

Hey Tom,

I simply followed the styling of the other button. Try adding the snippet below.

.fl-contact-form input[type=submit] {
  color: #FFF;
  font-size: 18px;
  line-height: 20px;
  padding: 10px 20px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  background: #88ae16;
  border: 1px solid #7ca20a;
  background: -moz-linear-gradient(top,#a6cc34 0%, #88ae16 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a6cc34), color-stop(100%,#88ae16));
  background: -webkit-linear-gradient(top,#a6cc34 0%,#88ae16 100%);
  background: -o-linear-gradient(top,#a6cc34 0%,#88ae16 100%);
  background: -ms-linear-gradient(top,#a6cc34 0%,#88ae16 100%);
  background: linear-gradient(to bottom,#a6cc34 0%,#88ae16 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6cc34', endColorstr='#88ae16',GradientType=0 );
}
.fl-contact-form input[type=submit]:hover {
  background: #0b7e2b;
  border: 1px solid #00721f;
  background: -moz-linear-gradient(top,#299c49 0%, #0b7e2b 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#299c49), color-stop(100%,#0b7e2b));
  background: -webkit-linear-gradient(top,#299c49 0%,#0b7e2b 100%);
  background: -o-linear-gradient(top,#299c49 0%,#0b7e2b 100%);
  background: -ms-linear-gradient(top,#299c49 0%,#0b7e2b 100%);
  background: linear-gradient(to bottom,#299c49 0%,#0b7e2b 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#299c49', endColorstr='#0b7e2b',GradientType=0 );
}

Ben

3

Oh man, that’s great!!

Thank you very much - again!! :wink:

Tom

4

No worries at all! Enjoy! :slight_smile:

Ben