メモしていたものが溜まってきて一覧化したのでシェアします。
以前にもCSSのみでボタンデザインやホバーエフェクトを実装できるエントリーを書きましたが、今回はCSSのみで実装するゴーストボタンと相性が良さそうなホバーエフェクトのサンプルです。
もちろんゴーストボタンに限らず様々なタイプのボタンで使用でき、対応しているブラウザであればコピペで簡単に実装できると思うので、気になるエフェクトがあれば是非使ってみてください :)
- 閲覧の際にChromeまたはFirefoxで見てもらえるとほぼ問題なく動きの確認ができると思いますが、ブラウザによって動きや見栄えが説明と異なる場合があります。
シャドウ
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);
}
内側にシャドウ
同じく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;
}
アウトラインをアニメーション
ホバー時に先ほどと同様にボタンの内側にシャドウをかけるエフェクトに加え、アウトラインがふわっとアニメーションされるものです。
実装には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種類のホバーエフェクトのサンプルがあります。
角丸×透過した背景色
ホバー時に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;
}
ボックスを少しずらした位置にフェードイン
擬似要素を使って作成したボックスを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;
}
波紋のようなエフェクト
ホバー時に中心から外へ波紋が広がるようなエフェクトを実装したものです。
実装には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;
}
}
外側から中心へ背景色を表示
ホバー時に外側から中心へ背景色が表示されるエフェクトで、実装には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);
}
下から背景色とデータ属性を使った文字列を表示する
ホバー時に背景色と文字列を下からアニメーション付きで表示させたもので、ホバー時のテキストは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
に変更したりすれば違う方向から表示されるタイプにも簡単に変更できます。
文字列をフェードアウト/フェードインさせる
ホバー時にもともと表示されている文字列を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;
}
文字列を回転させながら切り替える
こちらも同じくデータ属性を使用しているタイプで、ホバー時にそれぞれの文字列を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;
}
ボーダーと背景色をアニメーション
ホバー時にボーダーを非表示にしつつ背景色を表示させるという動きにアニメーションを付けたものです。
実装には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文字ずつ遅延表示
ホバーするとデフォルトで表示されている文字列が下に消えていき、その後ホバー時の文字列を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」を参考にしたもので、その他にも沢山のホバーエフェクトのサンプルがあります。
以上、ゴーストボタンと相性が良さそうなホバーエフェクトのサンプルでした。
以前にも今回と同様CSSのみでホバーエフェクトを実装する方法をまとめており、ここでは紹介していないエフェクトやボタンのデザインもCSSで行う方法などを紹介しているので、興味のある方はこちらもご覧になってみてください。
テキストやボーダーカラーを変化させたり、背景表示に少しだけアニメーションを加えるなど、全体的にシンプルなホバーエフェクトが多めです。