弊社から新しいサービス「リクルートマスター」がリリースされました！
詳細は『人が集まる採用サイトが手軽に作れるサービス「リクルートマスター」リリース』をお読みいただきたいのですが、こちらの紹介記事ではCSSアニメーションでグラデーションが変化するボタンを使用しています。
今回はこちらのような動くグラデーションボタンのサンプルコードをご紹介いたします。
ピンク系グラデーション
ピンク系のグラデーションです。マウスオーバーで記号が動きます。
まずはhtmlから。
|
1 |
<button class="btn_pink">ピンクのボタン</button> |
そして、こちらがCSSです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
.btn_pink { position: relative; display: inline-block; padding: .5em 2.5em .5em 1.5em; border: none; border-radius: .25em; color: #fff; background: linear-gradient(270deg, #ff9a9e, #fad0c4, #ffd3d5, #fecfef); background-size: 400% 400%; -webkit-animation: gradientAnm 20s ease infinite; animation: gradientAnm 20s ease infinite; } @-webkit-keyframes gradientAnm { 0% { background-position:0% 50% } 50% { background-position:100% 50% } 100% { background-position:0% 50% } } @keyframes gradientAnm { 0% { background-position:0% 50% } 50% { background-position:100% 50% } 100% { background-position:0% 50% } } .btn_pink::after { position: absolute; top: 0; bottom: 0; right: 0; padding-top: inherit; padding-bottom: inherit; width: 2.5em; content: ">"; font-size: 1.2em; text-align: center; } .btn_pink:hover::after { -webkit-animation: bounceR .4s alternate ease infinite; animation: bounceR .4s alternate ease infinite; } @-webkit-keyframes bounceR { from { -webkit-transform:translateX(0) } to { -webkit-transform:translateX(4px) } } @keyframes bounceR { from { transform:translateX(0) } to { transform:translateX(4px) } } |
ブルー系のボタン
htmlはクラス名が違うだけになります。
|
1 |
<button class="btn_blue">ブルーのボタン</button> |
CSSはこちら。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
.btn_blue { position: relative; display: inline-block; padding: .5em 2.5em .5em 1.5em; border: none; border-radius: .25em; color: #fff; background: linear-gradient(135deg, #a1c4fd, #c2e9fb, #48c6ef, #6f86d6); background-size: 400% 400%; -webkit-animation: gradientAnm 20s ease infinite; animation: gradientAnm 20s ease infinite; } @-webkit-keyframes gradientAnm { 0% { background-position:0% 50% } 50% { background-position:100% 50% } 100% { background-position:0% 50% } } @keyframes gradientAnm { 0% { background-position:0% 50% } 50% { background-position:100% 50% } 100% { background-position:0% 50% } } .btn_blue::after { position: absolute; top: 0; bottom: 0; right: 0; padding-top: inherit; padding-bottom: inherit; width: 2.5em; content: ">"; font-size: 1.2em; text-align: center; } .btn_blue:hover::after { -webkit-animation: bounceR .4s alternate ease infinite; animation: bounceR .4s alternate ease infinite; } @-webkit-keyframes bounceR { from { -webkit-transform:translateX(0) } to { -webkit-transform:translateX(4px) } } @keyframes bounceR { from { transform:translateX(0) } to { transform:translateX(4px) } } |
虹色のボタン
最後にレインボーカラーのボタンです。読みやすくするため、文字には影をつけています。
htmlはブルー系のボタン同様、クラス名のみ異なります。
|
1 |
<button class="btn_rainbow">虹色のボタン</button> |
CSSがこちら。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
.btn_rainbow { position: relative; display: inline-block; padding: .5em 2.5em .5em 1.5em; border: none; border-radius: .25em; color: #fff; text-shadow: 0 1px 1px #666; background: linear-gradient(-45deg, #62b8e7, #53c5a0, #fff26b, #ffa06b, #f68aa3, #956eb6); background-size: 400% 400%; -webkit-animation: gradientAnm 90s ease infinite; animation: gradientAnm 90s ease infinite; } @-webkit-keyframes gradientAnm { 0% { background-position:0% 50% } 50% { background-position:100% 50% } 100% { background-position:0% 50% } } @keyframes gradientAnm { 0% { background-position:0% 50% } 50% { background-position:100% 50% } 100% { background-position:0% 50% } } .btn_rainbow::after { position: absolute; top: 0; bottom: 0; right: 0; padding-top: inherit; padding-bottom: inherit; width: 2.5em; content: ">"; font-size: 1.2em; text-align: center; } .btn_rainbow:hover::after { -webkit-animation: bounceR .4s alternate ease infinite; animation: bounceR .4s alternate ease infinite; } @-webkit-keyframes bounceR { from { -webkit-transform:translateX(0) } to { -webkit-transform:translateX(4px) } } @keyframes bounceR { from { transform:translateX(0) } to { transform:translateX(4px) } } |
background: linear-gradientの部分を変えるとアレンジが可能です。
また、今回はコピペで使いやすいよう、文字の後ろに自動でつく記号は不等号（＞）にしましたが、FontAwesomeなどのWebフォントを読み込んでいる場合は、content: “>”の部分を変更していただくことで任意の記号がつくように変更できます。いろいろと試してみてください！
The following two tabs change content below.
名古屋に拠点を構えて、ホームページ制作やデジタルマーケティングを通してネット集客を行っています。ワンページ編集部が、当メディアを通して初心者の方にもわかりやすくウェブの情報を伝えていきます。
