onepage

弊社から新しいサービス「リクルートマスター」がリリースされました!
詳細は『人が集まる採用サイトが手軽に作れるサービス「リクルートマスター」リリース』をお読みいただきたいのですが、こちらの紹介記事ではCSSアニメーションでグラデーションが変化するボタンを使用しています。

今回はこちらのような動くグラデーションボタンのサンプルコードをご紹介いたします。

ピンク系グラデーション

ピンク系のグラデーションです。マウスオーバーで記号が動きます。

まずはhtmlから。

そして、こちらがCSSです。

ブルー系のボタン

htmlはクラス名が違うだけになります。

CSSはこちら。

虹色のボタン

最後にレインボーカラーのボタンです。読みやすくするため、文字には影をつけています。

htmlはブルー系のボタン同様、クラス名のみ異なります。

CSSがこちら。

background: linear-gradientの部分を変えるとアレンジが可能です。
また、今回はコピペで使いやすいよう、文字の後ろに自動でつく記号は不等号(>)にしましたが、FontAwesomeなどのWebフォントを読み込んでいる場合は、content: “>”の部分を変更していただくことで任意の記号がつくように変更できます。いろいろと試してみてください!

The following two tabs change content below.
ワンページ編集部
名古屋に拠点を構えて、ホームページ制作やデジタルマーケティングを通してネット集客を行っています。ワンページ編集部が、当メディアを通して初心者の方にもわかりやすくウェブの情報を伝えていきます。