SNSのシェアボタンをユニークに設置しよう!CSSのみでここまで出来る!

こんにちは、本日はSNSボタンの面白い出し方をご紹介します。
下の画像をホバーしてお楽しみください。


いかがでしょうか?実はこれCSSのみで作られています。古いブラウザの方だとうまく見えないかもしれません。
すみません。スマートフォンとかも確認してません、すみません。

HTML

<div class="image-effect-fall-back">
    <div class="share-layer">
        <a href="#" class="share-button share-via-facebook">
            <i class="fa fa-facebook"></i>
            Facebook
        </a>
        <a href="#" class="share-button share-via-twitter">
            <i class="fa fa-twitter"></i>
            Twitter
        </a>
        <a href="#" class="share-button share-via-google">
            <i class="fa fa-google"></i>
            Google +
        </a>
    </div>
    <div class="image-layer">
        <img src="tree.jpg" width="500" alt="California surf">
    </div>
</div>

CSS

<style>
    .image-effect-fall-back{
        width: 500px;
        height: 300px;
        position: relative;
        margin: 0 auto;
        -webkit-perspective: 800px;
        perspective: 800px;
    }
    .image-effect-fall-back .image-layer{
        position: absolute;
        top:0;
        left: 0;
        height: 300px;
        -webkit-transition: 0.6s;
        transition: 0.6s;
        z-index: 1;
    }
    .image-effect-fall-back:hover .image-layer{
        -webkit-transform: rotateX(70deg);
        transform: rotateX(70deg);
        overflow: visible;
    }
    .image-effect-fall-back .image-layer img{
        height: 100%;
    }
    .image-effect-fall-back .image-layer:before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
        opacity: 0;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
        -webkit-transform: rotateX(114deg) translateZ(-26px)  translateY(110px) scale(0.75);
        transform: rotateX(114deg) translateZ(-26px)  translateY(110px) scale(0.75);
        -webkit-transform-origin: bottom;
        -ms-transform-origin: bottom;
        transform-origin: bottom;
    }
    .image-effect-fall-back:hover .image-layer:before {
        opacity: 0.3;
    }
    .image-effect-fall-back .share-layer{
        position: absolute;
        bottom: 100px;
        left: 0;
        width: 100%;
        height: 100px;
        opacity: 0;
        z-index: 10;    
        -webkit-transition: 0.6s;
        transition: 0.6s;   
        -webkit-transform: rotateX(70deg);
        transform: rotateX(70deg);
    }
    .image-effect-fall-back:hover .share-layer {
        opacity: 1;
        -webkit-transform: rotateX(0deg) translateY(-70px);
        transform: rotateX(0deg) translateY(-70px);
    }
    .share-button{
        display: inline-block;
        text-decoration: none;
        color: #ffffff;
        padding: 12px;
        width: 80px;
        border-radius: 2px;
        margin: 25px 10px;
    }
    .share-via-facebook{
        background-color:#3b5998;
    }
    .share-via-twitter{
        background-color:#00aced;
    }
    .share-via-google{
        background-color:#d34836;
    }
</style>

JavaScript

なし

まとめ

内容ちゃんと理解せずご紹介したのですが、CSSだけでここまでできるなれば、ちゃんと理解して覚えておこうと思います…。
CSSで「変形」「トランジション」「フィルタ」をしてくれるとなれば、CSSアニメーションがあるのも納得です。

こういう簡単なものから是非お試しください!

参考:12 Fun Sharing Button Effects | Tutorialzine

フォローして続編をチェック

@universionsをフォロー