<!-- based upon original pen https://codepen.io/w3core/pen/XmNWxd
Tested on widescreen, not mobile -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="relative">
<H1>Pure HTML & CSS Flip Button</h1>
<h3>Using a Canva Embed with Button Overlay to Calendar Invite</h3>
    <div class="canva-embed" data-height-ratio="0.7095" data-design-id="DACJywekbHQ" style="padding:70.95% 5px 5px 5px;background:rgba(0,0,0,0.03);border-radius:8px;"><div class="canva-embed--byline" style="text-align:center;"><a href="https://www.canva.com/design/DACJywekbHQ/view?utm_content=DACJywekbHQ&utm_campaign=designshare&utm_medium=embeds&utm_source=link" target="_blank" class="canva-embed--url">I hate tacos! 31Events</a> by <a href="https://www.canva.com/amckinnis?utm_campaign=designshare&utm_medium=embeds&utm_source=link" target="_blank">amckinnis</a></div></div><script async src="https://sdk.canva.com/v1/embed.js"></script>
    <div class="absolute">
        <a href="#" class="folding folding-red" title="Feb 14 @ 7pm" onclick="w=480,h=200;window.open('http://design.31events.com/modules/inviteMe.cfm?event_id=3522','','width='+w+',height='+h+',left='+(screen.width-w)/2+',top='+(screen.height-h)/2);return false;"><i class="fa fa-heart"></i> Save to Calendar</a><strong> OR </strong>
        <a href="#" class="folding folding-green" title="Feb 16 @ 7pm" onclick="w=480,h=200;window.open('http://design.31events.com/modules/inviteMe.cfm?event_id=3521','','width='+w+',height='+h+',left='+(screen.width-w)/2+',top='+(screen.height-h)/2);return false;"><i class="fa fa-calendar-check-o"></i> Save to Calendar</a>
</div>
</div>

body {text-align:center; font-family:arial, sans-serif, sans;}

h1 {
    color: #006df0;
    font-size: 38px;
    font-weight: 300;
}

div.relative {
    position: relative;
    width: 600px;
    height: 600px;
    margin: 0% auto 0% auto;
}
div.absolute {
    position: absolute;
    bottom: 100px;
    right: 0;
    width: 600px;
    height: 10px;
}
.folding { 
    #folding3D(~"title");
    #folding3D-color();
    &.folding-fb {z-index:65535;}
    &.folding-blue {#folding3D-color(#48f, #fff, #fff);}
    &.folding-red {#folding3D-color(#e43, #fff, #fff);}
    &.folding-green {#folding3D-color(#3a5, #fff, #fff);}
    &.folding-yellow {#folding3D-color(#ea0, #fff, #fff);}
}

#folding3D (@attr:~"title"; @size:1.1em; @perspective:10em; @rotate:120deg) {
    @speed:.4s;
    @diff:34;
    @radius:@size / 5;
    @padding:@size / 2 @size;
    @rear-shadow:inset 0 0 @size / 3 rgba(0,0,0,.5);

    display:inline-block;
    box-sizing:border-box;
    position:relative;
    box-shadow:@rear-shadow;
    background:rgba(0,0,0,.1);
    border-radius:@radius;
    padding:@padding;
    perspective:@perspective;
    transition:box-shadow @speed, border-radius @speed;
    text-decoration:none;
    text-align:center;
    vertical-align:middle;
    font:normal bold @size arial, sans-serif, sans;
    outline:0 none;
    &:before {
        content:attr(@attr);
        display:block;
        box-sizing:border-box;
        position:absolute;
        z-index:1000;
        top:0;
        right:0;
        bottom:0;
        left:0;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        border-radius:@radius;
        padding:@size / 2;
        transform-origin:50% 100%;
        transform-style:preserve-3d;
        transition:transform @speed, color @speed - .1, box-shadow @speed - .1;
    }
    &:hover {
        z-index:65535;
        border-radius:@radius @radius 0 0;
        box-shadow:@rear-shadow,
                 0 (2.5 * @size) (1.6 * @size) 4px rgba(0,0,0,.5);
        &:before {
            border-radius:@radius @radius 0 0;
            transform:rotateX(-@rotate);
        }
    }
}

#folding3D-color (@bg:#369; @color:#fff; @backcolor:#369) {
    @diff:34;
    color:@backcolor;
    &:before {background:@bg; color:@color;}
    &:hover {
        &:before {
            color:transparent;
            box-shadow:inset 0 1px 0 rgba(255,255,255,.2),
                             0 -1px 0 (@bg - @diff),
                             0 -2px 0 -.5px (@bg - @diff),
                             0 -3px 0 -1px (@bg - @diff),
                             0 -4px 0 -1.5px (@bg - @diff),
                             0 -5px 0 -2.5px (@bg - @diff),
                             0 -7px .2px -4px (@bg - @diff);

        }
    }
}