CSS3アニメーションを使ったボタンホバーの12種類のかわいいエフェクト

サイト構築 -CSS

Post on:2013年6月20日

sponsors

Photoshopの「生成塗りつぶし」を文字の加工に活用しよう！ 2024年4月26日金曜日 20時から21時30分

CSS3アニメーションを使った、ちょっと素敵なかわいいホバーエフェクト12種類のデモを紹介します。

12 fancy buttons

デモはChrome, Safari, Firefoxなどのモダンブラウザでご覧ください。

12種類の中から、特に気に入ったものを下記にピックアップしてみました。
※各CSSはエフェクトの箇所のみで、ベンダプレフィックスは省略しています。

demo 4 のアニメーション

ホバーすると、上からパタッとなります。

.b04_3d_tick {
    perspective: 500px;
    perspective-origin: center top;
}

.b04_3d_tick div {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    padding: 10px;
    border: #000000 solid 1px;
}

.b04_3d_tick div:nth-child(1) {
    color: #000000;
    background-color: #ffffff;
    transition: all 0.2s ease;
}

.b04_3d_tick div:nth-child(2) {
    color: #ffffff;
    background-color: #000000;
    transform: rotateX(90deg);
    transition: all 0.2s ease;
    transform-origin: left top;
}

.b04_3d_tick:hover div:nth-child(1) {
    transition: all 0.2s ease;
    background-color: rgba(0, 0, 0, 0.5);
}

.b04_3d_tick:hover div:nth-child(2) {
    transition: all 0.2s ease;
    transform: rotateX(0deg);
}

demo 5 のアニメーション

ホバーすると、実はキューブ状でくるっとします。

.b05_3d_roll {
    perspective: 500px;
}

.b05_3d_roll div {
    position: absolute;
    text-align: center;
    width: 100%;
    height: 50px;
    padding: 10px;
    border: #000000 solid 1px;
    pointer-events: none;
    box-sizing: border-box;
}

.b05_3d_roll div:nth-child(1) {
    color: #000000;
    background-color: #000000;
    transform: rotateX(90deg);
    transition: all 0.2s ease;
    transform-origin: 50% 50% -25px;
}

.b05_3d_roll div:nth-child(2) {
    color: #000000;
    background-color: #ffffff;
    transform: rotateX(0deg);
    transition: all 0.2s ease;
    transform-origin: 50% 50% -25px;
}

.b05_3d_roll:hover div:nth-child(1) {
    color: #ffffff;
    transition: all 0.2s ease;
    transform: rotateX(0deg);
}

.b05_3d_roll:hover div:nth-child(2) {
    background-color: #000000;
    transition: all 0.2s ease;
    transform: rotateX(-90deg);
}

demo 7 のアニメーション

demo 5の改良版で、キューブが分割でくるっとします。

.b07_3d_double_roll {
    perspective: 500px;
    transform-style: preserve-3d;
}

.b07_3d_double_roll div {
    position: absolute;
    text-align: center;
    padding: 10px;
    border: #000000 solid 1px;
    pointer-events: none;
    box-sizing: border-box;
}

.b07_3d_double_roll div:nth-child(1) {
    color: #000000;
    background-color: #ffffff;
    z-index: 0;
    width: 100%;
    height: 50px;
    clip: rect(0px, 100px, 50px, 0px);
    position: absolute;
    transition: all 0.2s ease;
    transform: rotateX(0deg);
    transform-origin: 50% 50% -25px;
}

.b07_3d_double_roll div:nth-child(2) {
    color: #000000;
    background-color: #000000;
    z-index: -1;
    width: 100%;
    height: 50px;
    clip: rect(0px, 100px, 50px, 0px);
    position: absolute;
    transform: rotateX(90deg);
    transition: all 0.2s ease;
    transform-origin: 50% 50% -25px;
}

.b07_3d_double_roll div:nth-child(3) {
    color: #000000;
    background-color: #ffffff;
    z-index: 0;
    width: 100%;
    height: 50px;
    clip: rect(0px, 200px, 50px, 100px);
    position: absolute;
    transition: all 0.2s ease 0.1s;
    transform: rotateX(0deg);
    transform-origin: 50% 50% -25px;
}

.b07_3d_double_roll div:nth-child(4) {
    color: #000000;
    background-color: #000000;
    z-index: -1;
    width: 100%;
    height: 50px;
    clip: rect(0px, 200px, 50px, 100px);
    position: absolute;
    transform: rotateX(-90deg);
    transition: all 0.2s ease 0.1s;
    transform-origin: 50% 50% -25px;
}

.b07_3d_double_roll:hover div:nth-child(1) {
    background-color: #000000;
    transition: all 0.2s ease;
    transform: rotateX(-90deg);
}

.b07_3d_double_roll:hover div:nth-child(2) {
    color: #ffffff;
    transition: all 0.2s ease;
    transform: rotateX(0deg);
}

.b07_3d_double_roll:hover div:nth-child(3) {
    background-color: #000000;
    transition: all 0.2s ease 0.1s;
    transform: rotateX(90deg);
}

.b07_3d_double_roll:hover div:nth-child(4) {
    color: #ffffff;
    transition: all 0.2s ease 0.1s;
    transform: rotateX(0deg);
}

demo 11 のアニメーション

ホバーすると、平面のパネルがくるっと回転します。

.b11_3d_jumpback {
    perspective: 500px;
}

.b11_3d_jumpback div {
    color: #000000;
    background-color: #ffffff;
    border: #000000 solid 1px;
    padding: 10px;
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.b11_3d_jumpback:hover div {
    color: #ffffff;
    background-color: #000000;
    animation: b11_3d_jump 0.3s ease-out;
    animation-fill-mode: forwards;
}

@-webkit-keyframes b11_3d_jump {
    from {
        transform: translateZ(0px) rotateX(0deg);
        background-color: #ffffff;
        color: #000000;
    }
    49.99% {
        transform: translateZ(100px) rotateX(90deg);
        background-color: #808080;
        color: #000000;
    }
    50.00% {
        transform: translateZ(100px) rotateX(-90deg);
        background-color: #000000;
        color: #808080;
    }
    to {
        transform: translateZ(0px) rotateX(0deg);
        background-color: #000000;
        color: #ffffff;
    }
}

@-moz-keyframes b11_3d_jump {
    from {
        transform: translateZ(0px) rotateX(0deg);
        background-color: #ffffff;
        color: #000000;
    }
    49.99% {
        transform: translateZ(100px) rotateX(90deg);
        background-color: #808080;
        color: #000000;
    }
    50.00% {
        transform: translateZ(100px) rotateX(-90deg);
        background-color: #000000;
        color: #808080;
    }
    to {
        transform: translateZ(0px) rotateX(0deg);
        background-color: #000000;
        color: #ffffff;
    }
}

demo 12 のアニメーション

ホバーすると、ラベルが一度ぶれて、くっきりします。

.b12_3d_glitch {
    overflow: hidden;
    width: 200px;
    height: 51px;
}

.b12_3d_glitch div {
    padding: 10px;
    position: absolute;
    text-align: center;
    box-sizing: border-box;
    width: 200px;
    height: 50px;
}

.b12_3d_glitch div:nth-child(1) {
    background-color: #ffffff;
    top: 1px;
    left: 0px;
    border: #000000 solid 1px;
}

.b12_3d_glitch div:nth-child(2) {
    color: #000000;
    left: -100px;
    top: 2px;
    width: 400px;
    height: 50px;
}

.b12_3d_glitch:hover div:nth-child(1) {
    animation: b12_3d_glitch_bg 0.3s linear;
    animation-fill-mode: forwards;
}

.b12_3d_glitch:hover div:nth-child(2) {
    color: #000000;
    animation: b12_3d_glitch 0.3s linear;
    animation-fill-mode: forwards;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAGCAYAAAAL+1RLAAAAF0lEQVQIW2NkwAIYgWKS6OIgQQxAoUoAE4AAUnD/0ugAAAAASUVORK5CYII=) repeat;
}

@-webkit-keyframes b12_3d_glitch_bg {
    49.00% {
        background-color: #ffffff;
    }
    50.00% {
        background-color: #000000;
    }
    to {
        background-color: #000000;
    }
}

@-webkit-keyframes b12_3d_glitch {
    from {
        transform: skewX(0deg);
        color: #000000;
    }
    25.00% {
        transform: skewX(80deg);
        color: #000000;
    }
    75.00% {
        transform: skewX(-20deg);
        color: #ffffff;
    }
    90.00% {
        transform: skewX(0deg);
        color: #ffffff;
    }
    to {
        transform: skewX(0deg);
        color: #ffffff;
    }
}

@-moz-keyframes b12_3d_glitch_bg {
    49.00% {
        background-color: #ffffff;
    }
    50.00% {
        background-color: #000000;
    }
    to {
        background-color: #000000;
    }
}

@-moz-keyframes b12_3d_glitch {
    from {
        transform: skewX(0deg);
        color: #000000;
    }
    25.00% {
        transform: skewX(80deg);
        color: #000000;
    }
    75.00% {
        transform: skewX(-20deg);
        color: #ffffff;
    }
    90.00% {
        transform: skewX(0deg);
        color: #ffffff;
    }
    to {
        transform: skewX(0deg);
        color: #ffffff;
    }
}