Apply Gradient to Button in Header

[leadlaundry]

Hi,

I’m wanting to add a gradient to a button in the Header, although having trouble getting this to apply correctly. This is the styling i’m trying to use - linear-gradient(35deg, rgb(54, 209, 220) 0%, rgb(91, 134, 229) 100%)

[paul.r]

Hi,

To achieve that, you can add a unique class to your button.

Then add this in Header > CSS

.my-button {
    background: linear-gradient(35deg, rgb(54, 209, 220) 0%, rgb(91, 134, 229) 100%);
}

Hope that helps

[leadlaundry]

perfect! That worked a treat. Is it easy to apply the same logic to a border?

[friech]

Hi,

Yes, same method can be used for gradient border, but you need your border-width to be thick so you can see the gradient color.

.gradient-border {
	border: 20px solid transparent;
  border-image: -moz-linear-gradient(-45deg, #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #ce0404 100%);
  border-image: -webkit-linear-gradient(-45deg, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#ce0404 100%);
  border-image: linear-gradient(135deg, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#ce0404 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#ce0404',GradientType=1 );
  border-image-slice: 1;
}

Then apply the gradient-border CLASS to your any element that you want a gradient border.

You can generate a gradient color here, but instead of background property, replace that with border-image

Hope that helps,
Cheers!