Webサイト制作では、ボタンにアニメーションを付けるのが一般的ですね。
今回の記事では、ホバーするとテキストを入れ替えるアニメーション付きボタンを実装していきます！
CSSのみで作成していきますので、ぜひ一緒に作ってみてください。
ホバーするとテキストが入れ替わるボタンのDEMO
今回実装するボタンは、以下で確認してください。
ボタンにマウスカーソルをあてると、テキストがスライドして入れ替わるアニメーションを設定しました。
モバイル端末で閲覧中の場合は、ボタンをタップしてみてください。
それでは次で実装コードを紹介していきます。
【コピペ用】ホバーするとテキストが入れ替わるボタンの実装コード
こちらが今回の実装内容のコード全体です。
以下のHTMLとCSSをコピペしてお使いください。
<a href="./" class="btn">
<span class="btn__text">HOVER ME</span><!-- デフォルトの文字 -->
<span class="btn__text">HOVERED!</span><!-- ホバー時に表示する文字 -->
</a>/* ボタン本体 */
.btn {
position: relative;
display: inline-block;
background-image: linear-gradient(135deg, #DD5E89, #F7BB97); /* 背景のグラデーション */
border-radius: 30px; /* 角丸をつける */
width: 200px; /* 横幅 */
height: 60px; /* 縦幅 */
line-height: 60px; /* 行の高さ(heightと同じ値にする) */
text-decoration: none; /* aタグのアンダーラインを消す */
overflow: hidden; /* はみ出し部分を隠す */
cursor: pointer; /* カーソルをポインターにする */
}
/* ボタンのテキスト */
.btn__text {
position: absolute;
left: 0;
display: block;
height: 100%; /* 縦幅をボタンと同じにする */
width: 100%; /* 横幅をボタンと同じにする */
color: #fff; /* 文字色 */
font-size: 16px; /* 文字サイズ */
font-weight: bold; /* 文字の太さ */
text-align: center; /* テキストを中央揃え */
transition: all 0.3s; /* アニメーション実行時間 */
}
/* ボタンのテキスト(デフォルトのテキスト) */
.btn__text:nth-child(1) {
top: 0;
}
/* ボタンのテキスト(隠れているテキスト) */
.btn__text:nth-child(2) {
top: -100%;
}
/* ボタンホバーアクション */
.btn:hover .btn__text:nth-child(1) {
top: 100%;
}
.btn:hover .btn__text:nth-child(2) {
top: 0;
}ここから更に「カスタマイズしたい」「コードを理解したい」という方のために、次のセクションでコードの解説をしていきます。
ホバーするとテキストが入れ替わるボタンのコード解説
ここからは、コードの解説とボタンのテキストが入れ替わる仕組みについて説明していきます。
まずはHTMLから見ていきましょう。
HTMLでボタンの要素を作成する
<a href="./" class="btn">
<span class="btn__text">HOVER ME</span><!-- デフォルトの文字 -->
<span class="btn__text">HOVERED!</span><!-- ホバー時に表示する文字 -->
</a>まずはボタンの要素を作成していきます。
ここではリンクボタンを想定して、aタグで実装していきます。hrefの中には、リンク先のURLまたはパスを入力してください。
aタグの中には、
- デフォルトで表示しておく文字
- ホバーすると表示される文字
をそれぞれ用意しておきます。
それぞれの文字をspanタグで囲んだら、HTMLの準備は完了です。
CSSでボタンの装飾＆テキストを入れ替える
次はCSSでボタンの見た目を装飾していきましょう。
- ボタン本体のスタイル
- ボタンのテキストのスタイル
- ボタンをホバーした時のスタイル
上記の3つに分けて説明していきますね。
ボタン本体のスタイル
.btn {
position: relative;
display: inline-block;
background-image: linear-gradient(135deg, #DD5E89, #F7BB97); /* 背景のグラデーション */
border-radius: 30px; /* 角丸をつける */
width: 200px; /* 横幅 */
height: 60px; /* 縦幅 */
line-height: 60px; /* 行の高さ(heightと同じ値にする) */
text-decoration: none; /* aタグのアンダーラインを消す */
overflow: hidden; /* はみ出し部分を隠す */
cursor: pointer; /* カーソルをポインターにする */
}まずはボタンの本体から見ていきましょう。
横幅・縦幅・角丸・背景色などは自由に変えることができるので、好みで調整してください。
以下で重要な部分のみ解説していきます。
heightとline-heightの値を同じにする
要素の高さと行の高さを同じにすることで、文字を垂直方向に中央揃えすることができます。
height: 60px; /* 縦幅 */
line-height: 60px; /* 行の高さ */ボタンの高さと行の高さがどちらも60pxになっていますね。
これでボタンの中のテキストが上下中央に配置されるようになります。
overflow: hiddenではみ出した部分を隠す
今回のボタンには、デフォルトで表示するテキストと、ホバーすると表示するテキストの2種類がありますね。
DEMOでは1度に1つのテキストを表示するようになっていますが、実際には以下のようになっています。
テキストがボタンの外側にも表示されているのがわかりますね。
どちらか一つを表示するあいだは、もう片方を隠しておかなければいけません。
そこで、overflowプロパティにhiddenを指定します！
overflow: hiddenとは？
overflowは、中の要素が親要素よりも大きい場合に、はみ出した部分をどのように処理するかを設定できるプロパティです。
値をhiddenにすることで、はみ出した要素を隠すことができます。
ボタン要素にhiddenを指定することで、ボタンからはみ出しているテキストを非表示にすることができます。
これでどちらか一方のテキストのみ見えるようになりました。
ボタンのテキストのスタイル
/* ボタンのテキスト共通スタイル */
.btn__text {
position: absolute;
left: 0;
display: block;
height: 100%; /* 縦幅をボタンと同じにする */
width: 100%; /* 横幅をボタンと同じにする */
color: #fff; /* 文字色 */
font-size: 16px; /* 文字サイズ */
font-weight: bold; /* 文字の太さ */
text-align: center; /* テキストを中央揃え */
transition: all 0.3s; /* アニメーション実行時間 */
}
/* ボタンのテキスト(デフォルトのテキスト) */
.btn__text:nth-child(1) {
top: 0;
}
/* ボタンのテキスト(隠れているテキスト) */
.btn__text:nth-child(2) {
top: -100%;
}続いてはボタン内のテキストの装飾を見ていきましょう。
まずwidthとheightをどちらも100%にすることで、親要素のボタンと同じサイズにします。
さらにtext-alignとボタンに設定したline-heightで、テキストを上下左右中央揃えにします。
ここにposition: absoluteを指定することで、ボタン要素に対して絶対的な位置を指定します。
1つ目のテキストにはtop: 0を指定する
まずはデフォルトで表示するテキストの位置を調整します。
このテキストは最初から表示しておきたいので、top: 0を指定します。
親要素のボタンを基準に上から0pxの地点 = ボタンの一番上ということになりますね。
これで1つ目のテキストはボタンのちょうど中心に配置されるようになります。
2つ目のテキストにはtop: -100%を指定しボタン外に出しておく
2つ目のテキストは、最初は隠しておく必要がありますね。
top: -100%を指定して、テキストをボタンの上に押し出しておきます。
テキストがボタンからはみ出すことになりますが、overflow: hiddenを指定しているのではみ出したテキストは見えません。
これでテキストのスタイルは終わりです！
ボタンをホバーした時のスタイル
.btn:hover .btn__text:nth-child(1) {
top: 100%;
}
.btn:hover .btn__text:nth-child(2) {
top: 0;
}最後に、ボタンをホバーした時のスタイルを見ていきましょう。
まずは１つ目のテキストですが、top: 100%を指定します。
topの値が0から100%になるので、テキストはボタンの下に移動しますね。
次に2つ目のテキストにtop: 0を指定します。
もともと-100%だった値が0になるので、テキストが上からボタン中央に降りてきます。
これでホバーするとテキストが入れ替わるボタンが完成しました！
実際にホバーしてみて、仕組みを確認してみてください。
【まとめ】ホバーするとテキストが入れ替わるボタンを実装する方法
マウスカーソルを当てると、テキストが入れ替わるボタンを実装しました。
もう一度全体のコードを紹介しておきます。
<a href="./" class="btn">
<span class="btn__text">HOVER ME</span><!-- デフォルトの文字 -->
<span class="btn__text">HOVERED!</span><!-- ホバー時に表示する文字 -->
</a>/* ボタン本体 */
.btn {
position: relative;
display: inline-block;
background-image: linear-gradient(135deg, #DD5E89, #F7BB97); /* 背景のグラデーション */
border-radius: 30px; /* 角丸をつける */
width: 200px; /* 横幅 */
height: 60px; /* 縦幅 */
line-height: 60px; /* 行の高さ(heightと同じ値にする) */
text-decoration: none; /* aタグのアンダーラインを消す */
overflow: hidden; /* はみ出し部分を隠す */
cursor: pointer; /* カーソルをポインターにする */
}
/* ボタンのテキスト */
.btn__text {
position: absolute;
left: 0;
display: block;
height: 100%; /* 縦幅をボタンと同じにする */
width: 100%; /* 横幅をボタンと同じにする */
color: #fff; /* 文字色 */
font-size: 16px; /* 文字サイズ */
font-weight: bold; /* 文字の太さ */
text-align: center; /* テキストを中央揃え */
transition: all 0.3s; /* アニメーション実行時間 */
}
/* ボタンのテキスト(デフォルトのテキスト) */
.btn__text:nth-child(1) {
top: 0;
}
/* ボタンのテキスト(隠れているテキスト) */
.btn__text:nth-child(2) {
top: -100%;
}
/* ボタンホバーアクション */
.btn:hover .btn__text:nth-child(1) {
top: 100%;
}
.btn:hover .btn__text:nth-child(2) {
top: 0;
}ボタンに複数のテキストを設定したいときに便利なので、ぜひ使ってみてください！
また、他にもボタンのアニメーションをいくつか紹介してますので、興味があればどうぞ。
コメント