Profile

【CSS】コピペOK！ボタンをホバーした時のエフェクト15選

【CSS】コピペOK！ボタンをホバーした時のエフェクト15選

CSSで作る、ボタンをホバーしたときの色々なエフェクト15選。ちょっとした動きがあるだけでホバーするのが楽しくなります。

目次

ボタンをホバーした時の色々な動きのサンプル

半透明になる

半透明になる

コードを見る

<p class="btn btn-opacity">
  <a href="#">半透明になる</a>
</p>
/* ボタンの基本スタイル */
.btn a {
  position: relative;
  display: block;
  width: 280px;
  padding: 15px 0;
  background-color: #21BE78;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.6;
  text-decoration: none;
  text-align: center;
  transition: .2s;
  box-sizing: border-box;
}
.btn a::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 25px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  transition: .2s;
  box-sizing: border-box;
}

/* ホバー時のスタイル */
.btn-opacity a:hover {
  opacity: 0.7;
}

アイコンが右に動く

アイコンが右に動く

コードを見る

<p class="btn btn-icon-move">
  <a href="#">アイコンが右に動く</a>
</p>
/* ボタンの基本スタイル */
.btn a {
  position: relative;
  display: block;
  width: 280px;
  padding: 15px 0;
  background-color: #21BE78;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.6;
  text-decoration: none;
  text-align: center;
  transition: .2s;
  box-sizing: border-box;
}
.btn a::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 25px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  transition: .2s;
  box-sizing: border-box;
}

/* ホバー時のスタイル */
.btn-icon-move a:hover::after {
  right: 20px;
}

一回り小さく角丸になる

一回り小さく角丸になる

コードを見る

<p class="btn btn-scale">
  <a href="#">一回り小さく角丸になる</a>
</p>
/* ボタンの基本スタイル */
.btn a {
  position: relative;
  display: block;
  width: 280px;
  padding: 15px 0;
  background-color: #21BE78;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.6;
  text-decoration: none;
  text-align: center;
  transition: .2s;
  box-sizing: border-box;
}
.btn a::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 25px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  transition: .2s;
  box-sizing: border-box;
}

/* ホバー時のスタイル */
.btn-scale a:hover {
  border-radius: 8px;
  transform: scale(0.95);
}

背景がグラデーションから単色になる

背景がグラデーションから
単色になる

コードを見る

<p class="btn btn-gradation01">
  <a href="#">背景がグラデーションから<br>単色になる</a>
</p>
/* ボタンの基本スタイル */
.btn a {
  position: relative;
  display: block;
  width: 280px;
  padding: 15px 0;
  background-color: #21BE78;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.6;
  text-decoration: none;
  text-align: center;
  transition: .2s;
  box-sizing: border-box;
}
.btn a::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 25px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  transition: .2s;
  box-sizing: border-box;
}

/* 背景グラデーションのスタイル */
.btn-gradation01 a {
  background-image: linear-gradient(to right, #21BE78 0%, #21BE78 60%, #28ea92 100%);
  background-size: 200% auto;
  background-position: right center;
}

/* ホバー時のスタイル */
.btn-gradation01 a:hover {
  background-position: left center;
}

背景が単色からグラデーションになる

背景が単色から
グラデーションになる

コードを見る

<p class="btn btn-gradation02">
  <a href="#">背景が単色から<br>グラデーションになる</a>
</p>
/* ボタンの基本スタイル */
.btn a {
  position: relative;
  display: block;
  width: 280px;
  padding: 15px 0;
  background-color: #21BE78;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.6;
  text-decoration: none;
  text-align: center;
  transition: .2s;
  box-sizing: border-box;
}
.btn a::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 25px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  transition: .2s;
  box-sizing: border-box;
}

/* 背景グラデーションのスタイル */
.btn-gradation02 a {
  background-image: linear-gradient(to right, #21BE78 0%, #21BE78 60%, #28ea92 100%);
  background-size: 200% auto;
  background-position: left center;
}

/* ホバー時のスタイル */
.btn-gradation02 a:hover {
  background-position: right center;
}

背景色が変わる

背景色が変わる

コードを見る

<p class="btn btn-background-color">
  <a href="#">背景色が変わる</a>
</p>
/* ボタンの基本スタイル */
.btn a {
  position: relative;
  display: block;
  width: 280px;
  padding: 15px 0;
  background-color: #21BE78;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.6;
  text-decoration: none;
  text-align: center;
  transition: .2s;
  box-sizing: border-box;
}
.btn a::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 25px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  transition: .2s;
  box-sizing: border-box;
}

/* ホバー時のスタイル */
.btn-background-color a:hover {
  background-color: #2195be;
}

色が反転する

色が反転する

コードを見る

<p class="btn btn-color-change">
  <a href="#">色が反転する</a>
</p>
/* ボタンの基本スタイル */
.btn a {
  position: relative;
  display: block;
  width: 280px;
  padding: 15px 0;
  background-color: #21BE78;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.6;
  text-decoration: none;
  text-align: center;
  transition: .2s;
  box-sizing: border-box;
}
.btn a::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 25px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  transition: .2s;
  box-sizing: border-box;
}

/* ホバー時のスタイル */
.btn-color-change a {
  background-color: #21BE78;
  border: 3px solid #21BE78;
}
.btn-color-change a:hover {
  background-color: #fff;
  color: #21BE78;
}
.btn-color-change a:hover::after {
  border-color: #21BE78;
}

背景が左から右へスライドして変わる

背景が左から右へ
スライドして変わる

コードを見る

<p class="btn btn-slide-horizontal">
  <a href="#">背景が左から右へ<br>スライドして変わる</a>
</p>
/* ボタンの基本スタイル */
.btn a {
  position: relative;
  display: block;
  width: 280px;
  padding: 15px 0;
  background-color: #21BE78;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.6;
  text-decoration: none;
  text-align: center;
  transition: .2s;
  box-sizing: border-box;
}
.btn a::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 25px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  transition: .2s;
  box-sizing: border-box;
}

/* スライドする背景色のスタイル */
.btn-slide-horizontal a {
  border: 3px solid #21BE78;
  z-index: 1;
}
.btn-slide-horizontal a::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  transform-origin: right top;
  transform: scaleX(0);
  transition: transform .2s ease;
  z-index: -1;
}

/* ホバー時のスタイル */
.btn-slide-horizontal a:hover {
  color: #21BE78;
}
.btn-slide-horizontal a:hover::before {
  transform-origin: left top;
  transform: scaleX(1);
}
.btn-slide-horizontal a:hover::after {
  border-color: #21BE78;
}

背景が上から下へスライドして変わる

背景が上から下へ
スライドして変わる

コードを見る

<p class="btn btn-slide-vertical">
  <a href="#">背景が上から下へ<br>スライドして変わる</a>
</p>
/* ボタンの基本スタイル */
.btn a {
  position: relative;
  display: block;
  width: 280px;
  padding: 15px 0;
  background-color: #21BE78;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.6;
  text-decoration: none;
  text-align: center;
  transition: .2s;
  box-sizing: border-box;
}
.btn a::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 25px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  transition: .2s;
  box-sizing: border-box;
}

/* スライドする背景色のスタイル */
.btn-slide-vertical a {
  border: 3px solid #21BE78;
  z-index: 1;
}
.btn-slide-vertical a::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  transform-origin: left bottom;
  transform: scaleY(0);
  transition: transform .2s ease;
  z-index: -1;
}

/* ホバー時のスタイル */
.btn-slide-vertical a:hover {
  color: #21BE78;
}
.btn-slide-vertical a:hover::before {
  transform-origin: left top;
  transform: scaleY(1);
}
.btn-slide-vertical a:hover::after {
  border-color: #21BE78;
}

下線が左から右へスライドする

下線が左から右へ
スライドする

コードを見る

<p class="btn btn-line">
  <a href="#">下線が左から右へ<br>スライドする</a>
</p>
/* ボタンの基本スタイル */
.btn a {
  position: relative;
  display: block;
  width: 280px;
  padding: 15px 0;
  background-color: #21BE78;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.6;
  text-decoration: none;
  text-align: center;
  transition: .2s;
  box-sizing: border-box;
}
.btn a::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 25px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  transition: .2s;
  box-sizing: border-box;
}

/* スライドする下線のスタイル */
.btn-line a {
  background-color: #fff;
  color: #21BE78;
  z-index: 1;
}
.btn-line a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #21BE78;
  transform: scaleX(0);
  transform-origin: right top;
  transition: transform .2s ease;
}

/* ホバー時のスタイル */
.btn-line a:hover::before {
  transform-origin: left top;
  transform: scaleX(1);
}
.btn-line a::after {
  border-color: #21BE78;
}

キラッと光る

キラッと光る

コードを見る

<p class="btn btn-flash">
  <a href="#">キラッと光る</a>
</p>
/* ボタンの基本スタイル */
.btn a {
  position: relative;
  display: block;
  width: 280px;
  padding: 15px 0;
  background-color: #21BE78;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.6;
  text-decoration: none;
  text-align: center;
  transition: .2s;
  box-sizing: border-box;
}
.btn a::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 25px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  transition: .2s;
  box-sizing: border-box;
}

/* 光のスタイル */
.btn-flash a {
  overflow: hidden;
}
.btn-flash a::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(130deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80%);
  transition: .5s;
}

/* ホバー時のスタイル */
.btn-flash a:hover::before {
  top: 0;
  left: 100%;
}

浮いているボタンが沈む

浮いているボタンが沈む

コードを見る

<p class="btn btn-press">
  <a href="#">浮いているボタンが沈む</a>
</p>
/* ボタンの基本スタイル */
.btn a {
  position: relative;
  display: block;
  width: 280px;
  padding: 15px 0;
  background-color: #21BE78;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.6;
  text-decoration: none;
  text-align: center;
  transition: .2s;
  box-sizing: border-box;
}
.btn a::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 25px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  transition: .2s;
  box-sizing: border-box;
}

/* ホバー時のスタイル */
.btn-press a {
  box-shadow: 0 10px 10px -5px rgba(0,0,0,0.25);
  transform: translateY(-4px);
}
.btn-press a:hover {
  box-shadow: none;
  transform: translateY(0);
}

立体的なボタンが沈む

立体的なボタンが沈む

コードを見る

<p class="btn btn-3d">
  <a href="#">立体的なボタンが沈む</a>
</p>
/* ボタンの基本スタイル */
.btn a {
  position: relative;
  display: block;
  width: 280px;
  padding: 15px 0;
  background-color: #21BE78;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.6;
  text-decoration: none;
  text-align: center;
  transition: .2s;
  box-sizing: border-box;
}
.btn a::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 25px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  transition: .2s;
  box-sizing: border-box;
}

/* ホバー時のスタイル */
.btn-3d a {
  bottom: 7px;
  box-shadow: 0 7px #157f50;
}
.btn-3d a:hover {
  bottom: 0;
  box-shadow: 0 0 #157f50;
}

ボーダーのグラデーションで背景が塗られる

ボーダーのグラデーションで
背景が塗られる

コードを見る

<p class="btn btn-paint">
  <a href="#"><span>ボーダーのグラデーションで<br>背景が塗られる</span></a>
</p>
/* ボタンの基本スタイル */
.btn a {
  position: relative;
  display: block;
  width: 280px;
  padding: 15px 0;
  background-color: #21BE78;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.6;
  text-decoration: none;
  text-align: center;
  transition: .2s;
  box-sizing: border-box;
}
.btn a::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 25px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  transition: .2s;
  box-sizing: border-box;
}

/* ボーダーのグラデーションで背景が塗られるスタイル */
.btn-paint a {
  background-color: transparent;
  color: #21BE78;
  z-index: 1;
}
.btn-paint a::after {
  border-color: #21BE78;
}
.btn-paint span::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to right,#2195be 0,#21BE78 100%);
  transition: opacity .3s ease;
  z-index: -1;
}
.btn-paint span::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  top: 3px;
  right: 3px;
  bottom: 3px;
  left: 3px;
  background-color: #fff;
  transition: opacity .3s ease;
  z-index: -1;
}

/* ホバー時のスタイル */
.btn-paint a:hover {
  color: #fff;
}
.btn-paint a:hover::after {
  border-color: #fff;
}
.btn-paint a:hover span::after {
  opacity: 0;
}

ライトのように光る

※黒背景でお使いください

ライトのように光る

コードを見る

<p class="btn btn-light">
  <a href="#">ライトのように光る</a>
</p>
/* ボタンの基本スタイル */
.btn a {
  position: relative;
  display: block;
  width: 280px;
  padding: 15px 0;
  background-color: #21BE78;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.6;
  text-decoration: none;
  text-align: center;
  transition: .2s;
  box-sizing: border-box;
}
.btn a::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 25px;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  transition: .2s;
  box-sizing: border-box;
}

/* ライトのように光るスタイル */
.btn-light a {
  background-color: rgba(20,242,224,0.75);
  border: 1px solid #fff;
  transition: .15s ease;
}

/* ホバー時のスタイル */
.btn-light a:hover {
  background-color: rgb(29, 167, 217);
  background-color: #13f2e0;
  box-shadow: 0 0 15px -4px rgba(255, 255, 255, 1);
}

まとめ

同じ動きでも色の組み合わせやボーダーの有無を変えるとまた印象が変わるので、いろいろ試すのも良いかもしれません。「立体的なボタンが沈む」についてはざっくり解説したページもあるのでよければどうぞ↓

【CSS】コピペOK！hoverしたらへこむボタンのシンプルな作り方

【CSS】コピペOK！hoverしたらへこむボタンのシンプルな作り方

関連記事