ゴーストボタンと相性が良さそうなホバーエフェクト 10＋

メモしていたものが溜まってきて一覧化したのでシェアします。
以前にもCSSのみでボタンデザインやホバーエフェクトを実装できるエントリーを書きましたが、今回はCSSのみで実装するゴーストボタンと相性が良さそうなホバーエフェクトのサンプルです。
もちろんゴーストボタンに限らず様々なタイプのボタンで使用でき、対応しているブラウザであればコピペで簡単に実装できると思うので、気になるエフェクトがあれば是非使ってみてください :)

閲覧の際にChromeまたはFirefoxで見てもらえるとほぼ問題なく動きの確認ができると思いますが、ブラウザによって動きや見栄えが説明と異なる場合があります。

シャドウ

Button

transitionとbox-shadowを組み合わせて、ホバー時に薄っすらとシャドウを表示させたものです。
実装にはHTMLとCSSをそれぞれ下記のように記述します。

<a class="button" href="#">Button</a>

.button {
  display: inline-block;
  padding: .5em 4em;
  border: 2px solid #fff;
  color: #fff;
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: all .3s;
}
.button:hover {
  box-shadow: 0 0 45px rgba(255, 255, 255, .6);
}

内側にシャドウ

Button

同じくtransitionとbox-shadowを組み合わせて、先ほどのものとは逆にホバー時にボタンの内側に薄っすらとシャドウをかかるようにしたものです。
実装にはHTMLとCSSをそれぞれ下記のように記述しますが、記述もほぼ同じでホバー時のbox-shadowにinsetを追記して値を少し変えただけです。

<a class="button" href="#">Button</a>

.button {
  display: inline-block;
  padding: .5em 4em;
  border: 2px solid #fff;
  color: #fff;
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: all .3s;
}
.button:hover {
  box-shadow: 0 0 30px rgba(255, 255, 255, .6) inset;
}

アウトラインをアニメーション

Button

ホバー時に先ほどと同様にボタンの内側にシャドウをかけるエフェクトに加え、アウトラインがふわっとアニメーションされるものです。
実装にはHTMLとCSSをそれぞれ下記のように記述します。

<a class="button" href="#">Button</a>

.button {
  display: inline-block;
  padding: .5em 4em;
  color: #fff;
  text-align: center;
  text-decoration: none;
  outline: none;
  border: 0 solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
  outline: 2px solid;
  outline-color: rgba(255, 255, 255, 1);
  outline-offset: 0;
  transition: all 1s cubic-bezier(0.19, 1, .22, 1);
}
.button:hover {
  border: 2px solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, .5), 0 0 20px rgba(255, 255, 255, .2);
  outline-color: rgba(255, 255, 255, 0);
  outline-offset: 15px;
}

このエフェクトは以下を参考にしたもので、その他にも4種類のホバーエフェクトのサンプルがあります。

Collection of Button Hover Effects - A Pen by David Conner

角丸×透過した背景色

Button

ホバー時にborder-radiusを使って角丸にして、更に透過されている背景色を表示するという動きにアニメーションを加えたものです。
実装にはHTMLとCSSをそれぞれ下記のように記述します。

<a class="button" href="#">Button</a>

.button {
  display: inline-block;
  padding: .5em 4em;
  border: 2px solid #fff;
  color: #fff;
  text-align: center;
  text-decoration: none;
  outline: none;
  transition: all .3s;
}
.button:hover {
  background-color: rgba(255, 255, 255, .3);
  border-radius: 30px;
}

ボックスを少しずらした位置にフェードイン

Button

擬似要素を使って作成したボックスをopacityを使って予め非表示にしておき、ホバー時にそれの位置をずらしながら表示させるというものです。
実装にはHTMLとCSSをそれぞれ下記のように記述します。

<a class="button" href="#">Button</a>

.button {
  position: relative;
  display: inline-block;
  padding: .5em 4em;
  border: 2px solid #fff;
  color: #fff;
  text-align: center;
  text-decoration: none;
  outline: none;
}
.button::after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  border: 2px solid #fff;
  opacity: 0;
  transition: all .3s;
}
.button:hover::after {
  top: 4px;
  left: 4px;
  opacity: 1;
}

波紋のようなエフェクト

Button

ホバー時に中心から外へ波紋が広がるようなエフェクトを実装したものです。
実装にはHTMLとCSSをそれぞれ下記のように記述します。

<a class="button" href="#">Button</a>

.button {
  position: relative;
  display: inline-block;
  padding: .5em 4em;
  border: 2px solid #fff;
  color: #fff;
  text-align: center;
  text-decoration: none;
  outline: none;
  overflow: hidden;
}
.button::after {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: block;
  content: '';
  width: 0;
  height: 0;
  background-color: rgba(255, 255, 255, .3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.button:hover::after {
  animation: circle .75s;
}
@keyframes circle {
  50% {
    opacity: 1;
  }
  100% {
    width: 300px;
    height: 300px;
  }
}

外側から中心へ背景色を表示

Button

ホバー時に外側から中心へ背景色が表示されるエフェクトで、実装にはHTMLとCSSをそれぞれ下記のように記述します。

<a class="button" href="#">Button</a>

.button {
  position: relative;
  display: inline-block;
  padding: .5em 4em;
  border: 2px solid #fff;
  color: #fff;
  text-align: center;
  text-decoration: none;
  outline: none;
  overflow: hidden;
}
.button::after {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  display: block;
  content: '';
  width: 15em;
  height: 15em;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all .75s;
}
.button:hover::after {
  box-shadow: inset 0 0 0 10em rgba(255, 255, 255, .4);
}

下から背景色とデータ属性を使った文字列を表示する

Button

ホバー時に背景色と文字列を下からアニメーション付きで表示させたもので、ホバー時のテキストはHTMLにあるdata-hoverというデータ属性で指定した値をCSSのcontentを使って表示しています。

contentにそのまま文字列を記述するのでももちろん可能ですが、複数箇所でスタイルは同じでも異なる文字列のボタンを使うというときは、このようにデータ属性を用いると便利です。
実装にはHTMLとCSSをそれぞれ下記のように記述します。

<a class="button" data-hover="Hover" href="#">Button</a>

.button {
  position: relative;
  display: inline-block;
  padding: .5em 4em;
  border: 2px solid #fff;
  color: #fff;
  text-align: center;
  text-decoration: none;
  outline: none;
  overflow: hidden;
}
.button::after {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
  display: block;
  content: attr(data-hover);
  width: 100%;
  height: 100%;
  padding: .5em 4em;
  background-color: #fff;
  color: #333;
  opacity: 0;
  transition: all .3s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.button:hover::after {
  top: 0;
  opacity: 1;
}

今回のサンプルでは下から表示されるタイプですが、top, leftの値を変更したり、それぞれをbottom, rightに変更したりすれば違う方向から表示されるタイプにも簡単に変更できます。

文字列をフェードアウト/フェードインさせる

Button

ホバー時にもともと表示されている文字列をscaleとopacityを使ってフェードアウトさせ、その後同じくscaleとopacityを使ってホバー時に表示させたい文字列をフェードインさせたものです。

ホバー時の文字列は先ほどと同様にデータ属性を使用しており、実装にはHTMLとCSSをそれぞれ下記のように記述します。

<a class="button" data-hover="Hover" href="#"><span>Button</span></a>

.button {
  position: relative;
  display: inline-block;
  padding: .5em 4em;
  border: 2px solid #fff;
  color: #fff;
  text-decoration: none;
  outline: none;
}
.button::after {
  position: absolute;
  top: 0;
  left: 0;
  content: attr(data-hover);
  padding: .5em 4em;
  color: #fff;
  transform: scale(.3);
  transition: all .4s;
  opacity: 0;
}
.button span {
  display: block;
  transition: all .4s .2s;
}
.button:hover::after {
  transform: scale(1);
  transition: all .4s .2s;
  opacity: 1;
}
.button:hover span {
  transform: scale(.3);
  transition: all .4s;
  opacity: 0;
}

文字列を回転させながら切り替える

Button

こちらも同じくデータ属性を使用しているタイプで、ホバー時にそれぞれの文字列をrotateXとopacityを使って回転させながら切り換えたものです。
実装にはHTMLとCSSをそれぞれ下記のように記述します。

<a class="button" data-hover="Hover" href="#"><span>Button</span></a>

.button {
  position: relative;
  display: inline-block;
  padding: .5em 4em;
  border: 2px solid #fff;
  color: #fff;
  text-decoration: none;
  outline: none;
}
.button::after {
  position: absolute;
  top: 0;
  left: 0;
  content: attr(data-hover);
  padding: .5em 4em;
  color: #fff;
  transform: rotateX(-360deg);
  transition: all .4s;
  opacity: 0;
}
.button span {
  display: inline-block;
  transition: all .4s;
}
.button:hover::after {
  transform: rotateX(0);
  opacity: 1;
}
.button:hover span {
  transform: rotateX(-360deg);
  opacity: 0;
}

ボーダーと背景色をアニメーション

Button

ホバー時にボーダーを非表示にしつつ背景色を表示させるという動きにアニメーションを付けたものです。
実装にはHTMLとCSSをそれぞれ下記のように記述します。

<a class="button" href="#">Button</a>

.button {
  position: relative;
  display: inline-block;
  padding: .5em 4em;
  color: #fff;
  text-align: center;
  text-decoration: none;
  outline: none;
  overflow: hidden;
  transition: all .5s;
}
.button::before,
.button::after {
  position: absolute;
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  transition: all .5s;
}
.button::before {
  top: 0;
  left: 0;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
}
.button::after {
  right: 0;
  bottom: 0;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}
.button:hover {
  background-color: #fff;
  color: #000;
  transition: all .7s;
}
.button:hover::before,
.button:hover::after {
  width: 0;
  height: 0;
  opacity: 0;
  transition: all .7s;
}

文字列を1文字ずつ遅延表示

Hover

ホバーするとデフォルトで表示されている文字列が下に消えていき、その後ホバー時の文字列を1文字ずつ遅延表示させたものです。
実装にはHTMLとCSSをそれぞれ下記のように記述します。

<a class="button" data-hover="Button" href="#"><span>H</span><span>o</span><span>v</span><span>e</span><span>r</span></a>

.button {
  position: relative;
  display: inline-block;
  padding: .5em 4em;
  border: 2px solid #fff;
  color: #fff;
  text-align: center;
  text-decoration: none;
  outline: none;
  overflow: hidden;
}
.button span {
  display: inline-block;
  transform: translate3d(0, -10px, 0);
  transition: transform .4s, opacity .4s;
  transition-timing-function: cubic-bezier(.75, 0, .125, 1);
  opacity: 0;
}
.button::before {
  position: absolute;
  top: 0;
  left: 0;
  content: attr(data-hover);
  padding: .5em 4em;
  transition: transform .4s, opacity .4s;
  transition-timing-function: cubic-bezier(.75, 0, .125, 1);
  box-sizing: border-box;
}
.button:hover::before {
  transform: translate3d(0, 50%, 0);
  opacity: 0;
}
.button:hover span {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.button:hover span:nth-child(1) {
  transition-delay: .08s;
}
.button:hover span:nth-child(2) {
  transition-delay: .16s;
}
.button:hover span:nth-child(3) {
  transition-delay: .24s;
}
.button:hover span:nth-child(4) {
  transition-delay: .32s;
}
.button:hover span:nth-child(5) {
  transition-delay: .40s;
}

a要素内はホバー後に表示させたい文字列を記述しておき、それらをすべてspan要素で括っておきます。
また、デフォルトの文字列はデータ属性と擬似要素を組み合わせたものを表示させているので、data-hoverにデフォルトの文字列を記述します。
文字列の表示速度はそれぞれtransition-delayの値を変更すれば調整することができ、もっと文字数が多い場合は、span:nth-child(6), span:nth-child(7), span:nth-child(8) ...という感じでspan:nth-childの数を増やし、それぞれtransition-delayの値を指定してください。

このエフェクトは以下で紹介されているエフェクトのひとつ「Nina」を参考にしたもので、その他にも沢山のホバーエフェクトのサンプルがあります。

Inspiration for Button Styles and Effects | Codrops

以上、ゴーストボタンと相性が良さそうなホバーエフェクトのサンプルでした。
以前にも今回と同様CSSのみでホバーエフェクトを実装する方法をまとめており、ここでは紹介していないエフェクトやボタンのデザインもCSSで行う方法などを紹介しているので、興味のある方はこちらもご覧になってみてください。
テキストやボーダーカラーを変化させたり、背景表示に少しだけアニメーションを加えるなど、全体的にシンプルなホバーエフェクトが多めです。

CSSのみで実装するボタンデザインやホバーエフェクト 20＋α