WEBサイト制作・アプリ開発・システム開発・ブランディングデザイン制作に関するご相談はお気軽にご連絡ください。
構想段階からじっくりとヒアリングし、お客様の課題にあわせたアプローチ手法でお客様の“欲しかった”をカタチにしてご提案いたします。
Blog スタッフブログ
WEB制作
グラデーションボタンをCSSでホバー(マウスオーバー)させる方法
![](https://mixltd.jp/cms/wp-content/uploads/名称未設定-1-のコピー-2.jpg)
淡色のボタンの場合は疑似要素の:hoverをつければ、切り替えることができますが背景色をグラデーションにした場合のhoverはtransitionが効かなくなります。
グラデーション背景時のホバーは:beforeと:afterの疑似要素を用いて作成します
<a href="#" class="button">ボタン</a>
.button{
display: block;
width: 100%;
max-width: 328px;
height: 55px;
line-height: 57px;
color: #ffffff;
font-weight:bold;
z-index: 0;
margin-top: 40px;
border-radius: 40px;
transition: .3s;
text-align: center;
position: relative;
font-size: 15px;
}
.button:before{
content:"";
width:100%;
height:100%;
position:absolute;
z-index:-1;
left:0;
color:#ffffff;
transition:0.5s;
background-image: -moz-linear-gradient( 0deg, rgb(18,195,118) 0%, rgb(40,185,194) 100%);
background-image: -webkit-linear-gradient( 0deg, rgb(18,195,118) 0%, rgb(40,185,194) 100%);
background-image: -ms-linear-gradient( 0deg, rgb(18,195,118) 0%, rgb(40,185,194) 100%);
top: 0;
border-radius: 30px;
}
.button:after{
content:"";
width:100%;
height:100%;
position:absolute;
z-index:-2;
left:0;
border: 1px solid #12c376;
top: 0;
border-radius: 30px;
}
.button:hover:before{
opacity:0;
}
「:before」にはホバーする前のグラデーションカラーを、「:after」にはホバー後のグラデーションカラーを設定します。
構造は「:before」をボタンの一番上に重ね、押したときに「:hover:before」の「opacity」がバー時に上に配置されたレイヤーを透明にし、「:after」のボタンが表示される仕組みです。
単色でも作れるためボタンの作成時はこれをテンプレートにしたほうがいいかと考えてます。