目次
ウェブサイトのデザインにおいて、ボタンはユーザーのアクションを促す重要な要素です。視覚的に魅力的なボタンアニメーションを導入することで、ユーザー体験を向上させ、クリック率を高めることができます。本記事では、コピペでそのまま使用できるシンプルで効果的なボタンアニメーションのコードを集めました。今後も新しいアニメーションを追加していきますので、ぜひご活用ください。
ホバーしたとき背景が中心から広がるボタンアニメ
デザイン概要
このボタンアニメーションは、ユーザーがボタンにホバー（マウスオーバー）した際に、背景が中心から広がるシンプルでスタイリッシュな効果を実現します。視覚的なフィードバックを提供し、ユーザーの注意を引く効果があります。
実装方法
HTML構造
以下のHTMLコードを使用してボタンを作成します。
<p class="btn"><a href="">MORE</a></p>CSSスタイリング
次に、ボタンにアニメーション効果を追加するためのCSSを適用します。
.btn{
width: 120px;
margin: 30px auto;
}
.btn a{
width: 100%;
margin-inline: auto;
aspect-ratio: 1;
border: 1px solid #000;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 0;
color: #000;
text-decoration: none;
transition: color 0.3s ease;
}
.btn a::after{
content: "";
display: inline-block;
width: 100%;
height: 100%;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
background-color: #000;
transform: scale(0);
transition: transform 0.3s ease;
}
@media (hover: hover){
.btn a:hover{
opacity: 1;
color: #fff;
}
.btn a:hover::after{
background: #000;
transform: scale(1);
}
}コード解説
.btn a::after擬似要素:- 背景の拡大効果を実現するための要素。
transform: scale(0);で初期状態では縮小。transition: transform 0.3s ease;で拡大時のトランジションを滑らかに。
- ホバー時のスタイル（
@media (hover: hover)）:- ホバー時にテキストカラーを白（
#fff）に変更。 ::after擬似要素をtransform: scale(1);に変更し、背景が中心から広がるアニメーションを実現。
- ホバー時にテキストカラーを白（
ホバーしたとき背景が左から右に流れるボタンアニメ
デザイン概要
このボタンアニメーションは、ユーザーがボタンにホバーした際に、背景が左から右へ流れるように広がる効果を持っています。動きのあるデザインで、ボタンにダイナミックな印象を与えます。
実装方法
HTML構造
以下のHTMLコードを使用してボタンを作成します。
<p class="more"><a href="">ボタン</a></p>CSSスタイリング
次に、ボタンにアニメーション効果を追加するためのCSSを適用します。
.more{
width: 220px;
margin: 30px auto;
}
.more a{
display: block;
padding: 10px 0;
border: 1px solid #000;
color: #000;
text-align: center;
position: relative;
text-decoration: none;
transition: color 0.3s ease;
}
.more a::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background: #000;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.3s;
}
@media (hover: hover){
.more a:hover {
opacity: 1;
color: #fff;
}
.more a:hover::before {
transform: scaleX(1);
transform-origin: left;
}
}コード解説
.more a::before擬似要素:- 背景の流れる効果を実現するための要素。
background: #000;で背景色を黒に設定。transform: scaleX(0);で初期状態では縮小。transform-origin: right;で右端から拡大を開始。transition: transform 0.3s;で拡大時のトランジションを滑らかに。
- ホバー時のスタイル（
@media (hover: hover)）:- ホバー時にテキストカラーを白（
#fff）に変更。 ::before擬似要素をtransform: scaleX(1);に変更し、背景が左から右へ流れるように拡大。
- ホバー時にテキストカラーを白（
まとめ
コピペで簡単に実装できるボタンアニメーションを紹介しました。これらのアニメーションはシンプルながらも効果的で、ウェブサイトのデザインにアクセントを加えるのに最適です。
これらのボタンアニメーションは、提供されたコードを基にさらにカスタマイズすることで、独自のデザインに仕上げることが可能です。CSSのプロパティを調整し、サイトのニーズに合わせて最適なボタンデザインを実現してください。