CSSでこのボタンを作成する方法

CSSを使用して次のボタンをどのように作成しますか?

enter image description here

それが歪んでいるという事実は問題ではありません。よく分からない部分は、斜めに色分けされていることです。それは、1つの錯覚を与えるために配置された2つの異なる要素で構成される必要があると思います。

斜めの色の違いがない ボタンについては、これまでのところ次のようになります。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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" >View Demo</button>
</div> </div>

しかし、その多くが変わらなければならないと確信しています。

0
Googleの検索ツールを使用しましたか? ihatetomatoes.net/css3-button-hover-effect-deconstructed これは検索時に最初のページに2色ボタンを傾けた。
追加された 著者 Daniel Tate,
グーグルあなたが言う?聞いたことがない
追加された 著者 yevg,
適用されている場合は、devモードでチェックします(通常はホットキーはF12です)。
追加された 著者 Arphile,

5 答え

これは、任意のサイズで機能するグラデーションソリューションです。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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" >View Demo</button>
<button class="btn" >View Demo Demoooo</button>
<button class="btn" >View </button>
</div> </div>
2
追加された
これこそが私が求めていたものです。
追加された 著者 yevg,

これは、任意のサイズで機能するグラデーションソリューションです。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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" >View Demo</button>
<button class="btn" >View Demo Demoooo</button>
<button class="btn" >View </button>
</div> </div>
2
追加された
これこそが私が求めていたものです。
追加された 著者 yevg,

グラデーションの背景を取得するには、 グラデーションCSSジェネレータ を使用します。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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">View Demo</button>
</div> </div>
1
追加された
私は同様にグラデーションソリューションを考えました、しかし、グラデーションは固定されていて、すべてのボタン幅のために隅から隅まで整列しません。幅/内側のテキストに関係なく、特定のボタンに対する一般的な解決策を探していました。
追加された 著者 yevg,

これを試して:<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.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" >View Demo</button>
</div> </div>
1
追加された

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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" >View Demo</button>
</div> </div>
0
追加された