ボタンにマウスカーソルを合わせた時に、背景色がスライドのアニメーションで変わるボタンのソースをまとめました。
Contents
サンプル
実際のサンプルはこちらです。
「左から右へ」スライドするボタンを基本として、スライドする方向によって、全部で４つのサンプルを作成しています。
- 左から右へ
- 右から左へ
- 上から下へ
- 下から上へ
基本パターン「左から右へ」のHTML、CSSソース
ボタンのHTMLソースは以下です。
- <a href="" class="slide_button slide_to_right">サンプルボタン</a>
こちらのサンプルでは「a」タグに、ボタンのスタイルをつけています。
ボタンの基本スタイルはクラス名「slide_button」です。
クラス名「slide_to_right」でアニメーションのスタイルを指定しています。
基本パターン以外のサンプルにする場合は、このクラスを差し替えます。
次にCSSソースは以下です。
- .slide_button {
- display: inline-block;
- padding: 0.75rem 2rem;
- background-color: #FACB06;
- position: relative;
- overflow: hidden;
- text-decoration: none;
- transition: 0.25s;
- }
- .slide_button.slide_to_right:before {
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: #221815;
- transform: translateX(-100%);
- transition: 0.25s;
- z-index: -1;
- }
- .slide_button.slide_to_right:hover {
- color: #ffffff;
- background: none;
- }
- .slide_button.slide_to_right:hover:before {
- transform: translateX(0);
- }
1〜9行目がボタンの基本スタイルです。
2〜4行目はボタンの表示、パディング、背景色の指定です。
5〜6行目が今回のサンプルのポイントです。
5行目で、後で設定するボタンの疑似クラス「:before」で指定するボタンの領域に入ってくる背景を、ボタンの表示範囲外に配置するために、「position」プロパティを「relative」を指定して、位置を相対に設定しています。
6行目はボタンの領域の外に要素がはみ出した時に非表示にする設定です。
背景が左から右へスライドする背景の指定は「slide_to_right」クラスに付与している疑似クラス（「:before」）の10〜21行のスタイルでアニメーションで変化する背景の初期設定です。
12〜16行目でこのスライドする背景を絶対配置、上下左右「0px」に設定してボタンの領域を全て覆うように設定し、長方形を作ります
ここで作った長方形を「transform: translateX(-100%);」でボタンの範囲外に配置して、初期状態では表示されないようにしています。
19行目はアニメーションする時の時間を、20行目は重なり順をボタンよりも下に設定しています。
22〜28行目は、マウスカーソルがボタンに載った時（ホバー時）の表示を設定しています。
22〜25行目でホバー時にボタンの文字色を白に、背景色をなしにしています。
26〜28行目は「:before」クラスで作った長方形を「transform: translateX(0);」の記述で、ボタンの左端に配置しています。
19行目にアニメーションの時間を指定しているため、位置の移動を0.25秒かけてアニメーションします。
基本パターンとそれ以外のサンプルの違い
基本パターンとの違いを説明します。
HTMLの記述に関しては、基本パターンについていたクラス「slide_to_right」を変更すること。
CSSの記述は疑似クラス「:before」に設定された「transform」プロパティの値の違いです。
「右から左へ」パターン
- <a href="" class="slide_button slide_to_left">サンプルボタン</a>
ボタンに「slide_to_left」クラスを付与します。
CSSの記述は以下です。
- .slide_button.slide_to_left:before {
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: #221815;
- transform: translateX(100%);
- transition: 0.25s;
- z-index: -1;
- }
- .slide_button.slide_to_left:hover {
- color: #ffffff;
- background: none;
- }
- .slide_button.slide_to_left:hover:before {
- transform: translateX(0);
- }
基本パターンとの違いは、9行目です。
9行目は「transform: translateX(100%);」で右方向にボタンの外へ長方形をはみ出させています。
右側からはみ出した長方形がボタンの左端に移動してくるようにしています。
「上から下へ」パターン
- <a href="" class="slide_button slide_to_down">サンプルボタン</a>
ボタンに「slide_to_down」クラスを付与します。
CSSの記述は以下です。
- .slide_button.slide_to_down:before {
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: #221815;
- transform: translateY(-100%);
- transition: 0.25s;
- z-index: -1;
- }
- .slide_button.slide_to_down:hover {
- color: #ffffff;
- background: none;
- }
- .slide_button.slide_to_down:hover:before {
- transform: translateY(0);
- }
9行目の「transform: translateY(-100%);」で縦方向に上へ長方形を配置しています。
18行目で縦方向にボタンの表示範囲内に長方形を移動させています。
「下から上へ」パターン
- <a href="" class="slide_button slide_to_up">サンプルボタン</a>
ボタンに「slide_to_up」クラスを付与します。
CSSの記述は以下です。
- .slide_button.slide_to_up:before {
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: #221815;
- transform: translateY(100%);
- transition: 0.25s;
- z-index: -1;
- }
- .slide_button.slide_to_up:hover {
- color: #ffffff;
- background: none;
- }
- .slide_button.slide_to_up:hover:before {
- transform: translateY(0);
- }
9行目の「transform: translateY(100%);」で縦方向に下へ長方形を配置しています。
18行目で縦方向にボタンの表示範囲内に長方形を移動させています。
