How to create this button with CSS? - html

Question

How would one create the following button using CSS?
The fact that it is skewed is not the issue. The part I'm not sure about is the diagonal split in color that's positioned from corner to corner. Im not sure how to define a gradient in such a way that it would work for all button dimensions responsively.
I have the following so far, for a skewed button without the diagonal difference in color.
button.btn {
color: white;
background-color: red;
padding: 10px 20px;
line-height: 1;
border: none;
transform: skewX(-25deg);
cursor: pointer;
}
button.btn span {
display: block;
transform: skewX(25deg);
}
<button class="btn" ><span>View Demo</span></button>
But I'm sure a lot of that will all have to change.

Answer 1

Here is a gradient solution that will work with any size:
button.btn {
color: white;
background:linear-gradient(to bottom right, #e80027 49%,#d20024 50%);
padding: 10px 20px;
line-height: 1;
border: none;
transform: skewX(-25deg);
cursor: pointer;
}
button.btn span {
display: block;
transform: skewX(25deg);
}
<button class="btn" ><span>View Demo</span></button>
<button class="btn" ><span>View Demo Demoooo</span></button>
<button class="btn" ><span>View </span></button>

Answer 2

Use Gradient CSS generator to get any sort of gradient backgrounds..
button.btn {
color: white;
background: rgba(248, 80, 50, 1);
background: -moz-linear-gradient(-45deg, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(248, 80, 50, 1)), color-stop(50%, rgba(241, 111, 92, 1)), color-stop(51%, rgba(246, 41, 12, 1)), color-stop(71%, rgba(240, 47, 23, 1)), color-stop(100%, rgba(231, 56, 39, 1)));
background: -webkit-linear-gradient(-45deg, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
background: -o-linear-gradient(-45deg, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
background: -ms-linear-gradient(-45deg, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
background: linear-gradient(135deg, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827', GradientType=1);
padding: 10px 20px;
line-height: 1;
border: none;
transform: skewX(-25deg);
cursor: pointer;
}
button.btn span {
display: block;
transform: skewX(25deg);
}
<button class="btn"><span>View Demo</span></button>

Answer 3

Try this:
.btn{
background-color: #34ADFF;
background-image: -webkit-linear-gradient(-68deg, #e80027 50%, #d20024 50%);
border:0px;
padding:20px 25px;
font-size:17px;
-webkit-transform:skew(-30deg);
-moz-transform:skew(-30deg);
-o-transform:skew(-30deg);
transform:skew(-30deg);
color:#fff;
margin-left:20px;
}
<button class="btn" ><span>View Demo</span></button>

Answer 4

button.btn {
color: white;
background-color: red;
padding: 10px 20px;
line-height: 1;
border: none;
transform: skewX(-25deg);
cursor: pointer;
background: linear-gradient(165deg, rgba(245, 80, 50, 1) 0%, rgba(245, 111, 92, 1) 50%, rgba(230, 41, 12, 1) 51%, rgba(230, 47, 23, 1) 71%, rgba(230, 56, 39, 1) 100%);
}
button.btn span {
display: block;
transform: skewX(25deg);
}
<button class="btn" ><span>View Demo</span></button>