<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<button class="ribbon-note-btn">
  <span class="ribbon-fold">
    NEW
  </span>
  <span class="ribbon-text">
    Add a note
  </span>
  <span class="ribbon-plus">
    +
  </span>
</button>

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

.ribbon-note-btn{position:relative;display:flex;align-items:center;gap:20px;width:224px;height:62px;padding:0 16px 0 0;border:2px solid #23345b;border-radius:8px;background:#f9f3d8;color:#23345b;font:800 17px Arial,sans-serif;cursor:pointer;box-shadow:5px 5px 0 #23345b;overflow:hidden;transition:transform .2s,box-shadow .2s}.ribbon-fold{position:relative;align-self:stretch;display:grid;place-items:center;width:64px;background:#6d84ed;color:#fff;font-size:10px;letter-spacing:1px;clip-path:polygon(0 0,100% 0,100% 76%,50% 100%,0 76%);transition:transform .25s}.ribbon-fold::after{content:"";position:absolute;right:0;bottom:0;border-style:solid;border-width:0 0 11px 11px;border-color:transparent transparent #3e55bb transparent}.ribbon-plus{display:grid;place-items:center;margin-left:auto;width:27px;height:27px;border-radius:50%;background:#23345b;color:#f9f3d8;font-size:24px;line-height:1}.ribbon-note-btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 #23345b}.ribbon-note-btn:hover .ribbon-fold{transform:translateY(-5px)}.ribbon-note-btn:active{transform:translate(4px,4px);box-shadow:1px 1px 0 #23345b}