Blog スタッフブログ

WEB制作

グラデーションボタンをCSSでホバー（マウスオーバー）させる方法

淡色のボタンの場合は疑似要素の: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」のボタンが表示される仕組みです。

単色でも作れるためボタンの作成時はこれをテンプレートにしたほうがいいかと考えてます。

戻る一覧へ戻る