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

Posted on May 21th, 2015
In: Tips

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

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

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

1. シャドウ

Button

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

HTML

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

CSS

.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);
}

目次へ

2. 内側にシャドウ

Button

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

HTML

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

CSS

.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;
}

目次へ

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

Button

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

HTML

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

CSS

.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

目次へ

4. 角丸×透過した背景色

Button

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

HTML

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

CSS

.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;
}

目次へ

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

Button

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

HTML

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

CSS

.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;
}

目次へ

6. 波紋のようなエフェクト

Button

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

HTML

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

CSS

.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 {
	-webkit-animation: circle .75s;
	animation: circle .75s;
}
@-webkit-keyframes circle {
	50% {
		opacity: 1;
	}
	100% {
		width: 300px;
		height: 300px;
	}
}
@keyframes circle {
	50% {
		opacity: 1;
	}
	100% {
		width: 300px;
		height: 300px;
	}
}

目次へ

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

Button

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

HTML

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

CSS

.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);
}

目次へ

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

Button

ホバー時に背景色と文字列を下からアニメーション付きで表示させたもので、ホバー時のテキストはHTMLにあるdata-hoverというデータ属性で指定した値をCSSのcontentを使って表示しています。
contentにそのまま文字列を記述するのでももちろん可能ですが、複数箇所でスタイルは同じでも異なる文字列のボタンを使うという時は、このようにデータ属性を用いると便利です。
実装にはHTMLとCSSをそれぞれ以下のように記述します。

HTML

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

CSS

.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に変更したりすれば、違う方向から表示されるタイプにも簡単に変更できます。

目次へ

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

Button

ホバー時にもともと表示されている文字列をscaleとopacityを使ってフェードアウトさせ、その後同じくscaleとopacityを使ってホバー時に表示させたい文字列をフェードインさせたものです。
ホバー時の文字列は「8. 下から背景色とデータ属性を使った文字列を表示する」と同様にデータ属性を使用しており、実装にはHTMLとCSSをそれぞれ以下のように記述します。

HTML

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

CSS

.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;
}

目次へ

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

Button

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

HTML

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

CSS

.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;
}

目次へ

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

Button

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

HTML

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

CSS

.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;
}

目次へ

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

Hover

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

HTML

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

CSS

.button {
	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);
	-webkit-box-sizing: border-box;
	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＋α

また、以下ではゴーストボタンのデザインギャラリー（更新がストップしていますが…）とショーケースエントリーを幾つかまとめています。
紹介されているのは見た目の部分だけとなりますが、実際にサイトで閲覧するとホバーエフェクトがユニークなところもあったりするので、時間に余裕があるときなど眺めていると面白い発見があるかもしれません。

ゴーストボタンのデザインのみを掲載しているギャラリー「Websites with Ghost Buttons」＋α

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

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

1. シャドウ

2. 内側にシャドウ

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

4. 角丸×透過した背景色

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

6. 波紋のようなエフェクト

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

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

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

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

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

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

NxWorld

Sorry... doesn't support your browser

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

1. シャドウ

2. 内側にシャドウ

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

4. 角丸×透過した背景色

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

6. 波紋のようなエフェクト

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

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

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

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

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

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

NxWorld

Sorry... doesn't support your browser

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