CodePen Embed - 3D CSS Social Media Buttons


        <div class="twitter social-button">
            <div>
                    <a href="https://twitter.com/redStapler_twit?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-size="large" data-show-count="false">Follow @redStapler_twit</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
            </div>
            <div class="cover">
                <div class="inner">
                    <svg class="twitter-logo" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"><path fill="white" d="M153.6 301.6c94.3 0 145.9-78.2 145.9-145.9 0-2.2 0-4.4-.1-6.6 10-7.2 18.7-16.3 25.6-26.6-9.2 4.1-19.1 6.8-29.5 8.1 10.6-6.3 18.7-16.4 22.6-28.4-9.9 5.9-20.9 10.1-32.6 12.4-9.4-10-22.7-16.2-37.4-16.2-28.3 0-51.3 23-51.3 51.3 0 4 .5 7.9 1.3 11.7-42.6-2.1-80.4-22.6-105.7-53.6-4.4 7.6-6.9 16.4-6.9 25.8 0 17.8 9.1 33.5 22.8 42.7-8.4-.3-16.3-2.6-23.2-6.4v.7c0 24.8 17.7 45.6 41.1 50.3-4.3 1.2-8.8 1.8-13.5 1.8-3.3 0-6.5-.3-9.6-.9 6.5 20.4 25.5 35.2 47.9 35.6-17.6 13.8-39.7 22-63.7 22-4.1 0-8.2-.2-12.2-.7 22.6 14.4 49.6 22.9 78.5 22.9"></path></svg> 
                </div>
                <div class="edge"></div>
                <div class="outer">
                    <svg class="twitter-logo" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"><path fill="white" d="M153.6 301.6c94.3 0 145.9-78.2 145.9-145.9 0-2.2 0-4.4-.1-6.6 10-7.2 18.7-16.3 25.6-26.6-9.2 4.1-19.1 6.8-29.5 8.1 10.6-6.3 18.7-16.4 22.6-28.4-9.9 5.9-20.9 10.1-32.6 12.4-9.4-10-22.7-16.2-37.4-16.2-28.3 0-51.3 23-51.3 51.3 0 4 .5 7.9 1.3 11.7-42.6-2.1-80.4-22.6-105.7-53.6-4.4 7.6-6.9 16.4-6.9 25.8 0 17.8 9.1 33.5 22.8 42.7-8.4-.3-16.3-2.6-23.2-6.4v.7c0 24.8 17.7 45.6 41.1 50.3-4.3 1.2-8.8 1.8-13.5 1.8-3.3 0-6.5-.3-9.6-.9 6.5 20.4 25.5 35.2 47.9 35.6-17.6 13.8-39.7 22-63.7 22-4.1 0-8.2-.2-12.2-.7 22.6 14.4 49.6 22.9 78.5 22.9"></path></svg> 
                </div>
            </div>
            <div class="shadow"></div>
        </div>

        <div class="facebook social-button">
                <div>
                        <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FtheRedStapler%2F&width=88&layout=button_count&action=like&size=large&show_faces=false&share=false&height=21&appId=599455787171202&locale=en_US" width="88" height="33" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
                </div>
                <div class="cover">
                    <div class="inner">
                            <svg viewbox="0 0 512 512">
                                    <path fill="white" d="M211.9 197.4h-36.7v59.9h36.7V433.1h70.5V256.5h49.2l5.2-59.1h-54.4c0 0 0-22.1 0-33.7 0-13.9 2.8-19.5 16.3-19.5 10.9 0 38.2 0 38.2 0V82.9c0 0-40.2 0-48.8 0 -52.5 0-76.1 23.1-76.1 67.3C211.9 188.8 211.9 197.4 211.9 197.4z"></path>
                                  </svg> 
                    </div>
                    <div class="edge"></div>
                    <div class="outer">
                            <svg viewbox="0 0 512 512">
                                    <path fill="white" d="M211.9 197.4h-36.7v59.9h36.7V433.1h70.5V256.5h49.2l5.2-59.1h-54.4c0 0 0-22.1 0-33.7 0-13.9 2.8-19.5 16.3-19.5 10.9 0 38.2 0 38.2 0V82.9c0 0-40.2 0-48.8 0 -52.5 0-76.1 23.1-76.1 67.3C211.9 188.8 211.9 197.4 211.9 197.4z"></path>
                                  </svg>
                    </div>
                </div>
                <div class="shadow"></div>
        </div>

        <div class="youtube social-button">
                <div class="g-ytsubscribe" data-channelid="UCRthRrv06q1iOl86-tTKJhg" data-layout="default" data-count="default"></div>
                <div class="cover">
                    <div class="inner">
                            <svg viewbox="0 0 512 512">
                                    <path fill="white"d="M422.6 193.6c-5.3-45.3-23.3-51.6-59-54 -50.8-3.5-164.3-3.5-215.1 0 -35.7 2.4-53.7 8.7-59 54 -4 33.6-4 91.1 0 124.8 5.3 45.3 23.3 51.6 59 54 50.9 3.5 164.3 3.5 215.1 0 35.7-2.4 53.7-8.7 59-54C426.6 284.8 426.6 227.3 422.6 193.6zM222.2 303.4v-94.6l90.7 47.3L222.2 303.4z"></path>
                                  </svg> 
                    </div>
                    <div class="edge"></div>
                    <div class="outer">
                            <svg viewbox="0 0 512 512">
                                    <path fill="white" d="M422.6 193.6c-5.3-45.3-23.3-51.6-59-54 -50.8-3.5-164.3-3.5-215.1 0 -35.7 2.4-53.7 8.7-59 54 -4 33.6-4 91.1 0 124.8 5.3 45.3 23.3 51.6 59 54 50.9 3.5 164.3 3.5 215.1 0 35.7-2.4 53.7-8.7 59-54C426.6 284.8 426.6 227.3 422.6 193.6zM222.2 303.4v-94.6l90.7 47.3L222.2 303.4z"></path>
                                  </svg>
                    </div>
                </div>
                <div class="shadow"></div>
        </div>
        <script src="https://apis.google.com/js/platform.js"></script>

html,
body {
    width: 100vw;
    height: 100vh; 
  margin: 0;
  padding:0;
}
body {
    
    font-size: 22px;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    color: #fff;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.social-button {
    min-width: 11rem;
    display: flex;
    justify-content: center;

    height:2.1rem;
    padding: 0.375rem 0.375rem 0;
    margin-right: 2rem;
    background: #eee;
    border-radius: 0.25rem;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
    perspective: 30rem;
}
.cover {
    transform-origin: center bottom;
    transform-style: preserve-3d;
    text-align: center;
    z-index: 99;
}
.cover, .cover > * {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.cover svg{
    width: 40px;
    height:40px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}
.inner, .outer {
    border-radius: 0.25rem;
    background-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.1) 100%);
}
.outer {
    transform:translateZ(0.25rem);
}
.edge {
    top:0.25rem;
    height:0.25rem;
    transform:rotateX(90deg);
    transform-origin: center top;
}
.social-button:hover .cover {
    transform:rotateX(-120deg);
}
.social-button, .social-button div {
    transition-duration: 0.7s;
    transition-timing-function: ease;
}
.shadow {
    position: absolute;
    top:100%;
    left:0;
    width:100%;
    height:3.2rem;
    border-radius: 0.5rem;
    opacity: 0;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, transparent 100%);
    transform:rotateX(90deg);
    transform-origin: center top;
}
.social-button:hover .shadow {
    transform: rotateX(45deg) scale(0.95);
    opacity: 1;
}

.twitter .inner {
    background-color: #67e2fe;
}
.twitter .outer {
    background-color: #2ec8fa;
    
}
.twitter .edge {
    background-color: #20c7f3;
}
.facebook .inner {
    background-color: #3b5998;
}
.facebook .outer {
    background-color: #476ab4;
    
}
.facebook .edge {
    background-color: #2f477c;
}
.youtube .inner {
    background-color: #ff1d1d;
}
.youtube .outer {
    background-color: #ff0000;
}
.youtube .edge {
    background-color: #df0000;
}

/* See step-by-step tutorial on how to create this at
https://youtu.be/mcQ6MHhdKvU


Want more? Visit for our CSS beginner tutorials!
https://redstapler.co
*/

This Pen is owned by Red Stapler on CodePen.

See more by @redstapler on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.