サイトの問い合わせボタンでよく動くやつ見かけるけど、JSのことは良くわからないから実装は難しいかな・・・・
JSの知識はなくともCSSだけで動きのあるボタンを作れるよ。いろんな動きが再現できるから今回はそれを徹底紹介！！
目次
cssのみで実装する動きのあるボタン8選
まずボタンの基本のサンプルデザインとなるcssは以下になりますが、こちらは任意で好きなようにデザインしてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.button-simple { position: relative; font-weight: bold; padding: 5px 15px; margin: 0px 5px; border-radius: 7px;/*角の丸み*/ font-size: 18px;/*文字サイズ*/ background-color: #FF9900;/*背景色*/ color: #fff;/*文字色*/ display: inline-block; text-shadow: 1px 1px 0px rgb(0, 0, 0, 0.3); box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3); } a:hover .button-simple { background-color: #FFE2B7;/*触れたときの背景色*/ color: #999;/*触れたときの文字色*/ box-shadow: 0 0px 0 rgb(0, 0, 0, 0.3); animation-play-state: paused; top: 3px; } |
ちなみに今回のサンプルボタンはFontAwesomeでアイコンも表示してあります。
FontAwesomeの使用方法はこちらのページをご覧ください。
振動するボタン
こちらは以下のcssによって制御します。
|
1 2 3 4 5 6 7 8 9 10 11 |
.sindou { animation: sindou 0.2s infinite; } @keyframes sindou { 0% { transform: translate(0px, 0px) } 50% { transform: translate(0px, 2px) rotateZ(1deg) } } |
htmlへの記述はボタンのコードに新たにクラスタグで sindou と追記すれば動作します。
|
1 |
<span class="button-simple sindou "><i class="fas fa-bomb "></i>振動する</span> |
ぷにぷにするボタン
こちらは以下のcssによって制御します。
|
1 2 3 4 5 6 7 8 9 10 11 |
.punipuni { animation: punipuni 0.8s infinite; } @keyframes punipuni { 0% { transform: scale(1, 1); } 50% { transform: scale(0.98, 1.15) } } |
htmlへの記述はボタンのコードに新たにクラスタグで punipuni と追記すれば動作します。
|
1 |
<span class="button-simple punipuni "><i class="fas fa-bomb "></i>振動する</span> |
上下に揺れるボタン
こちらは以下の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 |
.yureru-updown { animation: yureru-updown 2s infinite; } @keyframes yureru-updown { 0% { transform: translate(0px, 2px); } 5% { transform: translate(0px, -2px); } 10% { transform: translate(0px, 2px); } 15% { transform: translate(0px, -2px); } 20% { transform: translate(0px, 2px); } 25% { transform: translate(0px, -2px); } 30% { transform: translate(0px, 0px); } } |
htmlへの記述はボタンのコードに新たにクラスタグで yureru-updown と追記すれば動作します。
|
1 |
<span class="button-simple yureru-updown "><i class="fas fa-bomb "></i>上下に揺れる</span> |
回転して揺れるボタン
こちらは以下のcssによって制御します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.yureru-kaiten { animation: yureru-kaiten 0.4s infinite; } @keyframes yureru-kaiten { 0% { transform: translate(1px, 1px); } 25% { transform: translate(1px, -1px); } 50% { transform: translate(-1px, -1px); } 75% { transform: translate(-1px, 1px); } 100% { transform: translate(1px, 1px); } } |
htmlへの記述はボタンのコードに新たにクラスタグで yureru-kaiten と追記すれば動作します。
|
1 |
<span class="button-simple yureru-kaiten "><i class="fas fa-bomb "></i>回転して揺れる</span> |
左右に揺れるボタン
こちらは以下の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 |
.yureru-s { animation: yureru-s 2s infinite; } @keyframes yureru-s { 0% { transform: translate(2px, 0px); } 5% { transform: translate(-2px, 0px); } 10% { transform: translate(2px, 0px); } 15% { transform: translate(-2px, 0px); } 20% { transform: translate(2px, 0px); } 25% { transform: translate(-2px, 0px); } 30% { transform: translate(0px, 0px); } } |
htmlへの記述はボタンのコードに新たにクラスタグで yureru-s と追記すれば動作します。
|
1 |
<span class="button-simple yureru-s "><i class="fas fa-bomb "></i>左右に揺れる</span> |
もっちり動くボタン
こちらは以下のcssによって制御します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.mocchiri { animation: mocchiri 3s infinite; } @keyframes mocchiri { 0% { transform: scale(1, 0.8); } 20% { transform: scale(0.8, 1.1); } 95% { transform: scale(1, 1); } 100% { transform: scale(1, 0.8); } } |
htmlへの記述はボタンのコードに新たにクラスタグで mocchiri と追記すれば動作します。
|
1 |
<span class="button-simple mocchiri "><i class="fas fa-bomb "></i>左右に揺れる</span> |
へこむボタン
こちらは以下の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 |
.hekomu { animation: hekomu 2s infinite; box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3); } @keyframes hekomu { 0% { box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3); top: 0px; } 10% { box-shadow: 0 0 0 rgb(0, 0, 0, 0.3); top: 3px; } 20% { box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3); top: 0px; } 30% { box-shadow: 0 0 0 rgb(0, 0, 0, 0.3); top: 3px; } 40% { box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3); top: 0px; } } |
htmlへの記述はボタンのコードに新たにクラスタグで hekomu と追記すれば動作します。
|
1 |
<span class="button-simple hekomu "><i class="fas fa-bomb "></i>へこむ</span> |
鼓動するボタン
こちらは以下のcssによって制御します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.kodou { animation: kodou 1.5s infinite; } @keyframes kodou { 0% { transform: scale(1.05) } 5% { transform: scale(1) } 95% { transform: scale(1) } 100% { -webkit-transform: scale(1.05) } } |
htmlへの記述はボタンのコードに新たにクラスタグで kodou と追記すれば動作します。
|
1 |
<span class="button-simple kodou "><i class="fas fa-bomb "></i>鼓動する</span> |
