How to create this button with CSS?

660 views html
-1

How would one create the following button using CSS?

enter image description here

The fact that it is skewed is not the issue. The part I'm not sure about is the diagonal split in color, which I believe will need to be made up of two different elements positioned to give the illusion of one.

I have the following so far, for a skewed button without the diagonal difference in color.

HTML

<button class="btn" ><span>View Demo</span></button>

CSS

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);
}

But I'm sure a lot of that will all have to change.

answered question

check with dev mode ( usually it's hotkey is F12 ) if it's applied, it will not have strikeout

Did you use the search tool Google? ihatetomatoes.net/css3-button-hover-effect-deconstructed This was on the first page when searching skewed 2 color button.

1 Answer

8

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>

posted this

Have an answer?

JD

Please login first before posting an answer.