Apply two color on button background

Question

I need to apply two background color for my button. Need to design the button like below.

Is this design possible using pure CSS or please provide any other suggestion.

Thank you

Answer 1

This is achievable with linear-gradient.

The linear-gradient stands for four-parameter:

1. <angel>. Which is the starting point of linear-gradient, so a value of 0deg is equivalent to to top; increasing values rotate clockwise from there.
2. color. It will indicate the color of linear-gradient, which can be either rgb, rgba, or hex.
3. <linear-color-stop>. This indicates the stopping point of colors on our linear-gradient (To keep it dynamic for various width you should use it with percentage rather than raw numbers.)
4. <color-hint>. This one indicates an interpolation hint defining how the gradient progresses between adjacent color stops. So whenever you set it to 100% it will come up with a hard line where the gradient changes (It should always set for the last color or by indicating color individually).

linear-gradient(<angel>, color <linear-color-stop> <color-hint>)

Your final code should be something like this:

button {
  width: 200px;
  height: 50px;
  border: 1px solid rgba(40, 141, 211, 1);
  border-radius: 5px;
  background: linear-gradient(315deg, rgba(40, 141, 211, 1) 90%, rgba(255, 214, 103, 1) 10% 100%);
}

<button></button>

Answer 2

use this clean and simple:

When you need to have a angled that is when you need a degree in the linear-gradient in your case it is top left corner so playing around the numbers will get you things worked.

Make the border thick as you want, I have choose the color and the border as per the picture as well as the width of the button.

NOTE: if you increase the width of the button, the incline angle will vary so you have to tweak a code for that as well. This is same for all answers posted here.

.btn {
  width: 200px;
  height: 50px;
  background: linear-gradient(315deg, #278CD3 150px, #FFD667 90px, #FFD667 100%);
  border-radius: 7px;
  border: 1px solid #278CD3;
}

<button type="button" class="btn ">Button</button>

Answer 3

You can use css gradient

.btn{
background: rgb(241,157,6);
background: linear-gradient(133deg, rgba(241,157,6,1) 20%, rgba(9,9,121,1) 20%, rgba(9,9,121,1) 100%);
  color: white;
  border: none;
  padding: 10px 20px;
}

<button class="btn">hello</button>

Answer 4

Here you go, replica.

.btn {
    width:200px;
    height:50px;
    border-radius: 6px;
    border: 2px solid #278CD3;
    background: linear-gradient(315deg,#278CD3 150px, #FFD667 90px, #FFD667 100%);
    font-size:16px;
    color: #FFD667;
}

<button type="button" class="btn">Button</button>

Answer 5

Easier solution will be to use an image like that as the background of the button.

<button><img src="pic_trulli.jpg" width="30px" height= "30px"></button>

A bit more adjustment with css is needed to make the image to fit into the button