<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<article class="envelope-card">
  <div class="envelope-flap">
  </div>
  <div class="envelope-note">
    <small>
      MAY BUDGET
    </small>
    <h3>
      €1,240 left
    </h3>
    <p>
      Safe to spend
      <b>
        68%
      </b>
    </p>
  </div>
</article>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.envelope-card{position:relative;width:240px;height:157px;overflow:hidden;border-radius:14px;background:#e5b77a;font-family:Arial;cursor:pointer;box-shadow:0 8px 15px #8c572f33}.envelope-flap{position:absolute;z-index:3;top:0;width:100%;height:92px;background:#f4cd95;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .45s}.envelope-note{position:absolute;z-index:2;top:42px;left:19px;right:19px;padding:16px;border-radius:7px;background:#fffaf0;color:#5d412f;box-shadow:0 3px 7px #6e462833;transition:top .45s}.envelope-note small{font-size:9px;font-weight:800;letter-spacing:1px;color:#bb7752}.envelope-note h3{margin:7px 0;font-size:20px}.envelope-note p{margin:0;font-size:10px;color:#9c7c69}.envelope-note b{float:right;color:#5b9a72}.envelope-card:hover .envelope-flap{transform:rotateX(180deg)}.envelope-card:hover .envelope-note{top:15px}