html - 2つのグラデーションボタンを持つCSS?

Question

以下は、当サイトで使用しているボタンの画像で、.png です。

標準ボタンの CSS を使用して、それに本当に近づけるかどうかを確認したいと思います。

グラデーションは、上部: #E14C5B から中央: #D33742 から下部: #B61C27 に、丸い角のピクセル放射状のカップルが続きます。

それはCSSでも可能ですか？

Answer 1

始めます...

HTML

<button>Submit</button>

いくつかの背景グラデーションを含む CSS

@import url(http://fonts.googleapis.com/css?family=Pathway+Gothic+One);
button {
    font-family: 'Pathway Gothic One', sans-serif;
    font-size: 1.5em;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
    border: 1px solid transparent;
    border-radius: 3px;
    height: 50px;
    width: 100px;
    color: white;
    background-repeat: repeat-x;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E14C5B), color-stop(0.5, #D33742), to(#B61C27));
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

デモ

スクリーンショット:

クリック時に何らかのクリック感のあるフィードバック タイプの外観が必要な場合は、次を追加することもできます。

button:active {
    -webkit-transform: translate(1px, 1px);
    box-shadow: none;
}

デモ付き:active

-webkitこれは、ブラウザーの場合にのみプレフィックスが付けられます。サポートするものには、適切なベンダー プレフィックスを指定する必要があります。