![見出し画像](https://assets.st-note.com/production/uploads/images/140640943/rectangle_large_type_2_ee3b9d96d06db25d748cabc87c3b5ae9.png?width=1200)
【CSS】ボタンがマウスオーバーしたら色が変わっていくようなアニメーションのパターン
ボタンにマウスを乗せた時に色が変わるアニメーションは、ウェブデザインでよく用いられる効果で、ユーザーの体験を向上させることができます。ここでは、色が変わるさまざまなアニメーション効果のCSSコード例を紹介します。
目次
ボタンのHTMLコード
まずは、各ボタンのHTMLコードです。
<!-- グラデーションで色が変わるボタン -->
<button class="button-gradient">グラデーション</button>
<!-- 色がフェードインするボタン -->
<button class="button-fade-in">フェードイン</button>
<!-- 枠線の色が変わるボタン -->
<button class="button-border-change">枠線変更</button>
<!-- 影の色が変わるボタン -->
<button class="button-shadow-change">影変更</button>
<!-- ボタンが膨らむ -->
<button class="button-puff">膨らむ</button>
グラデーションで色が変わる
.button-gradient {
background-color: #3498db ;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
outline: none;
transition: background-color 0.3s ease;
}
.button-gradient:hover {
background-image: linear-gradient(45deg, #3498db , #9b59b6 );
}
色がフェードインする
.button-fade-in {
background-color: #3498db ;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
outline: none;
transition: background-color 0.5s ease;
}
.button-fade-in:hover {
background-color: #9b59b6 ;
}
枠線の色が変わる
.button-border-change {
background-color: #fff ;
color: #3498db ;
padding: 10px 20px;
border: 2px solid #3498db ;
cursor: pointer;
outline: none;
transition: border-color 0.4s ease;
}
.button-border-change:hover {
border-color: #9b59b6 ;
}
影の色が変わる
.button-shadow-change {
background-color: #3498db ;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
outline: none;
box-shadow: 0 3px 6px #3498db ;
transition: box-shadow 0.4s ease;
}
.button-shadow-change:hover {
box-shadow: 0 3px 6px #9b59b6 ;
}
この記事が参加している募集
サポートお願い致します!