こんにちは、リョウヘイです。
今回紹介するのは、マウスを乗せるとスライドして色が変わるボタンの作り方です。javascriptなどは使わず、CSSアニメーションだけで作っていきます。気に入ったものがあれば、ぜひコピペして使ってみてくださいね。
完成サンプルはこちら
まずは以下のページから実際に動きをご覧ください。各ボタンにマウスを乗せると、いろんな方向からスライドするように色が変わります。
スライドエフェクトつきボタンHTML
HTMLはすべて共通です。以下のように「button」というclassをあてただけのリンクタグになっています。
|
1 |
<a class="button" href="#">スライドボタン</a> |
それでは、各ボタンのCSSを紹介していきます。
CSS_01:左から右へスライド
左から右へスライドするボタンの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 |
.button{ display: inline-block; padding: 1em 3em; border-radius: 3px; color: #fff; font-size: 16px; text-decoration: none; border: 1px solid #23a7ff; color: #23a7ff; position: relative; overflow: hidden; } .button:hover{ color: #fff; } .button::before{ content: ""; display: block; position: absolute; z-index: -1; top: -1%; left: -1%; width: 102%; height: 102%; background-color: #23a7ff; -webkit-transition: -webkit-transform .4s; transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(0, 1); transform: scale(0, 1); } .button:hover::before{ -webkit-transform: scale(1, 1); transform: scale(1, 1); } |
CSS_02:右から左へスライド
右から左へスライドするボタンの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 |
.button{ display: inline-block; padding: 1em 3em; border-radius: 3px; color: #fff; font-size: 16px; text-decoration: none; border: 1px solid #23a7ff; color: #23a7ff; position: relative; overflow: hidden; } .button:hover{ color: #fff; } .button::before{ content: ""; display: block; position: absolute; z-index: -1; top: -1%; left: -1%; width: 102%; height: 102%; background-color: #23a7ff; -webkit-transition: -webkit-transform .4s; transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; -webkit-transform-origin: right top; transform-origin: right top; -webkit-transform: scale(0, 1); transform: scale(0, 1); } .button:hover::before{ -webkit-transform: scale(1, 1); transform: scale(1, 1); } |
CSS_03:上から下へスライド
左から右へスライドするボタンの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 |
.button{ display: inline-block; padding: 1em 3em; border-radius: 3px; color: #fff; font-size: 16px; text-decoration: none; border: 1px solid #23a7ff; color: #23a7ff; position: relative; overflow: hidden; } .button:hover{ color: #fff; } .button::before{ content: ""; display: block; position: absolute; z-index: -1; top: -1%; left: -1%; width: 102%; height: 102%; background-color: #23a7ff; -webkit-transition: -webkit-transform .4s; transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(1, 0); transform: scale(1, 0); } .button:hover::before{ -webkit-transform: scale(1, 1); transform: scale(1, 1); } |
CSS_04:下から上へスライド
下から上へスライドするボタンの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 |
.button{ display: inline-block; padding: 1em 3em; border-radius: 3px; color: #fff; font-size: 16px; text-decoration: none; border: 1px solid #23a7ff; color: #23a7ff; position: relative; overflow: hidden; } .button:hover{ color: #fff; } .button::before{ content: ""; display: block; position: absolute; z-index: -1; top: -1%; left: -1%; width: 102%; height: 102%; background-color: #23a7ff; -webkit-transition: -webkit-transform .4s; transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: scale(1, 0); transform: scale(1, 0); } .button:hover::before{ -webkit-transform: scale(1, 1); transform: scale(1, 1); } |
CSS_05:左から右へスライドし、右に消える
マウスをのせて左から右へスライドするまでは01と同じですが、マウスを外したときにそのまま右に消えていきます。
|
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 |
.button{ display: inline-block; padding: 1em 3em; border-radius: 3px; color: #fff; font-size: 16px; text-decoration: none; border: 1px solid #23a7ff; color: #23a7ff; position: relative; overflow: hidden; } .button:hover{ color: #fff; } .button::before{ content: ""; display: block; position: absolute; z-index: -1; top: -1%; left: -1%; width: 102%; height: 102%; background-color: #23a7ff; -webkit-transition: -webkit-transform .4s; transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; -webkit-transform-origin: right top; transform-origin: right top; -webkit-transform: scale(0, 1); transform: scale(0, 1); } .button:hover::before{ -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(1, 1); transform: scale(1, 1); } |
CSS_06:右から左へスライドし、左に消える
マウスをのせて右から左へスライドするまでは02と同じですが、マウスを外したときにそのまま左に消えていきます。
|
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 |
.button{ display: inline-block; padding: 1em 3em; border-radius: 3px; color: #fff; font-size: 16px; text-decoration: none; border: 1px solid #23a7ff; color: #23a7ff; position: relative; overflow: hidden; } .button:hover{ color: #fff; } .button::before{ content: ""; display: block; position: absolute; z-index: -1; top: -1%; left: -1%; width: 102%; height: 102%; background-color: #23a7ff; -webkit-transition: -webkit-transform .4s; transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(0, 1); transform: scale(0, 1); } .button:hover::before{ -webkit-transform-origin: right top; transform-origin: right top; -webkit-transform: scale(1, 1); transform: scale(1, 1); } |
CSS_07:上から下へスライドし、下に消える
マウスをのせて上から下へスライドするまでは03と同じですが、マウスを外したときにそのまま下に消えていきます。
|
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 |
.button{ display: inline-block; padding: 1em 3em; border-radius: 3px; color: #fff; font-size: 16px; text-decoration: none; border: 1px solid #23a7ff; color: #23a7ff; position: relative; overflow: hidden; } .button:hover{ color: #fff; } .button::before{ content: ""; display: block; position: absolute; z-index: -1; top: -1%; left: -1%; width: 102%; height: 102%; background-color: #23a7ff; -webkit-transition: -webkit-transform .4s; transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: scale(1, 0); transform: scale(1, 0); } .button:hover::before{ -webkit-transform-origin: right top; transform-origin: right top; -webkit-transform: scale(1, 1); transform: scale(1, 1); } |
CSS_08:下から上へスライドし、上に消える
マウスをのせて下から上へスライドするまでは04と同じですが、マウスを外したときにそのまま上に消えていきます。
|
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 |
.button{ display: inline-block; padding: 1em 3em; border-radius: 3px; color: #fff; font-size: 16px; text-decoration: none; border: 1px solid #23a7ff; color: #23a7ff; position: relative; overflow: hidden; } .button:hover{ color: #fff; } .button::before{ content: ""; display: block; position: absolute; z-index: -1; top: -1%; left: -1%; width: 102%; height: 102%; background-color: #23a7ff; -webkit-transition: -webkit-transform .4s; transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; -webkit-transform-origin: right top; transform-origin: right top; -webkit-transform: scale(1, 0); transform: scale(1, 0); } .button:hover::before{ -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: scale(1, 1); transform: scale(1, 1); } |
CSS_09:真ん中から左右へスライド
真ん中から左右に開くようにスライドするボタンの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 |
.button{ display: inline-block; padding: 1em 3em; border-radius: 3px; color: #fff; font-size: 16px; text-decoration: none; border: 1px solid #23a7ff; color: #23a7ff; position: relative; overflow: hidden; } .button:hover{ color: #fff; } .button::before{ content: ""; display: block; position: absolute; z-index: -1; top: -1%; left: -1%; width: 102%; height: 102%; background-color: #23a7ff; -webkit-transition: -webkit-transform .4s; transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; -webkit-transform-origin: center; transform-origin: center; -webkit-transform: scale(0, 1); transform: scale(0, 1); } .button:hover::before{ -webkit-transform-origin: center; transform-origin: center; -webkit-transform: scale(1, 1); transform: scale(1, 1); } |
CSS_10:真ん中から上下へスライド
真ん中から上下に開くようにスライドするボタンの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 |
.button{ display: inline-block; padding: 1em 3em; border-radius: 3px; color: #fff; font-size: 16px; text-decoration: none; border: 1px solid #23a7ff; color: #23a7ff; position: relative; overflow: hidden; } .button:hover{ color: #fff; } .button::before{ content: ""; display: block; position: absolute; z-index: -1; top: -1%; left: -1%; width: 102%; height: 102%; background-color: #23a7ff; -webkit-transition: -webkit-transform .4s; transition: -webkit-transform .4s; transition: transform .4s; transition: transform .4s, -webkit-transform .4s; -webkit-transform-origin: center; transform-origin: center; -webkit-transform: scale(1, 0); transform: scale(1, 0); } .button:hover::before{ -webkit-transform-origin: center; transform-origin: center; -webkit-transform: scale(1, 1); transform: scale(1, 1); } |
まとめ
というわけで、今回はスライドして色が変わるボタンの作り方でした。シンプルで使いやすいエフェクトなので、もし気に入っていただけたら是非使ってみてくださいね。