<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<button class="seedling-btn">
  <span class="seedling-leaves">
    <i>
    </i>
    <i>
    </i>
  </span>
  <span>
    Plant idea
  </span>
</button>

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

.seedling-btn{display:flex;align-items:center;gap:11px;padding:13px 19px;border:2px solid #426a3d;border-radius:18px 18px 18px 5px;background:#dff0c6;color:#2e5134;font:800 16px Arial,sans-serif;cursor:pointer;box-shadow:5px 5px 0 #83ac71;transition:transform .2s,box-shadow .2s}.seedling-leaves{position:relative;width:31px;height:29px}.seedling-leaves::after{content:"";position:absolute;bottom:0;left:14px;width:3px;height:16px;border-radius:3px;background:#447044}.seedling-leaves i{position:absolute;bottom:10px;width:15px;height:11px;background:#58a161;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}.seedling-leaves i:first-child{left:2px;border-radius:12px 12px 2px 12px;transform:rotate(-28deg)}.seedling-leaves i:last-child{right:1px;border-radius:12px 12px 12px 2px;transform:rotate(28deg)}.seedling-btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #83ac71}.seedling-btn:hover i:first-child{transform:rotate(-48deg) scale(1.12)}.seedling-btn:hover i:last-child{transform:rotate(48deg) scale(1.12)}.seedling-btn:active{transform:translate(4px,4px);box-shadow:1px 1px 0 #83ac71}