

「Gradient Buttons」は、マウスホバーでアニメーションのエフェクトが発生するグラデーションボタンを作成したいときに便利なサイト。

200種類以上のサンプルボタンから選び、そのボタンのCSSを取得することができます。

・サンプルボタン
マウスを乗せるとアニメーション効果が発生します。
<div class="btn-grad">Hover me</div>
Gradient ButtonsでCSSをコピーして作成したボタン。Gradient Buttonsのサイト上に種類はおそらく230個以上あり、そのなかから選んでCSSをコピーしてきます。

・発行されるCSS
<pre>.btn-grad {background-image: linear-gradient(to right, #603813 0%, #b29f94 51%, #603813 100%)}
.btn-grad:hover { background-position: right center; }</pre>

・ボタンにするためのCSS
<pre>
.btn-grad {
    margin: 10px;
    padding: 30px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    /* text-shadow: 0px 0px 10px rgba(0,0,0,0.2); */
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    display: block;
}
</pre>

