Cool key button

button.html

<div class="h-screen bg-white w-full grid place-items-center">
  <span class="block relative before:bg-[#04D2A9] before:content-[' '] before:block before:absolute before:-inset-[1px] before:-z-10 z-10 before:rounded-[0.85rem]">
    <span class="block bg-[#04D2A9] text-white rounded-[0.8rem] z-10 shadow-sm shadow-[#1F2A37]/40">
      <button class="z-10 group flex items-center gap-3 bg-gradient-to-b from-white/30 to-transparent rounded-[0.8rem] relative before:bg-[#04D2A9] before:content-[' '] before:block before:absolute before:inset-[1px] before:rounded-[0.75rem] before:-z-10 p-2">
        <span><svg width="23" height="23" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 4.16667V15.8333M4.16666 10H15.8333" stroke="white" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </span>
        <span>New template</span>
        <span class="bg-[#03BE99] px-2 py-1 rounded-[0.45rem] text-sm">
          N
        </span>
      </button>
    </span>
  </span>
</div>