<button>
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_ii)">
<rect width="46" height="46" rx="23" fill="#FEC45C"/>
</g>
<path d="M27 12H15C13.9 12 13 12.9 13 14V28H15V14H27V12ZM30 16H19C17.9 16 17 16.9 17 18V32C17 33.1 17.9 34 19 34H30C31.1 34 32 33.1 32 32V18C32 16.9 31.1 16 30 16ZM30 32H19V18H30V32Z" fill="#4A1172"/>
<defs>
<filter id="filter0_ii" x="0" y="0" width="46" height="46" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-3"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="3"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow"/>
</filter>
</defs>
</svg>
  </button>

  <button>
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_ii)">
<rect width="44" height="44" rx="22" fill="#4A1172"/>
</g>
<path d="M21.5627 9.02148L25.4623 16.9217L34.1801 18.1885L27.8714 24.3373L29.3603 33.0215L21.5627 28.9217L13.7652 33.0215L15.254 24.3373L8.94531 18.1885L17.6631 16.9217L21.5627 9.02148Z" fill="#FEC45C"/>
<path d="M21.5627 9.02148L25.4623 16.9217L34.1801 18.1885L27.8714 24.3373L29.3603 33.0215L21.5627 28.9217L13.7652 33.0215L15.254 24.3373L8.94531 18.1885L17.6631 16.9217L21.5627 9.02148Z" fill="url(#paint0_linear)"/>
<defs>
<filter id="filter0_ii" x="0" y="0" width="44" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-3"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="3"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow"/>
</filter>
<linearGradient id="paint0_linear" x1="21.5627" y1="9.02148" x2="21.5627" y2="33.0215" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0.3"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
</defs>
    </svg>
  </button>

  <button>
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_ii)">
<circle cx="14" cy="14" r="14" fill="#FEC45C"/>
</g>
<path d="M14.1124 8.2L14.0984 8.214V8.2L10.5984 9.208V11.728L13.1324 10.538V18H15.7084V8.2H14.1124Z" fill="#4A1172"/>
<defs>
<filter id="filter0_ii" x="0" y="0" width="28" height="28" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-3"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="3"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow"/>
</filter>
</defs>
</svg>
  </button>

  <button>
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_ii)">
<circle cx="14" cy="14" r="14" fill="#FEC45C"/>
</g>
<path d="M12.8314 16.082L13.7834 15.354C15.7994 13.898 17.1014 12.568 17.1014 11.154C17.1014 9.306 15.6734 8.018 13.3774 8.018C10.9694 8.018 9.59739 9.278 9.49939 11.518H11.8794C11.8794 10.524 12.4954 9.992 13.3214 9.992C14.1474 9.992 14.6934 10.482 14.6934 11.252C14.6934 11.924 14.3014 12.456 13.0834 13.492L9.59739 16.418H9.58339V18H17.2274V16.082H12.8314Z" fill="#4A1172"/>
<defs>
<filter id="filter0_ii" x="0" y="0" width="28" height="28" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-3"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="3"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow"/>
</filter>
</defs>
</svg>
  </button>

<button>
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_ii)">
<circle cx="14" cy="14" r="14" fill="#FEC45C"/>
</g>
<path d="M15.6073 13.002C16.5313 12.666 17.1333 12.008 17.1333 10.93C17.1333 9.152 15.6913 8.018 13.5073 8.018C11.2953 8.018 9.86733 9.166 9.69933 11.392H12.0373C12.0653 10.384 12.5693 9.88 13.4933 9.88C14.3333 9.88 14.8233 10.356 14.8233 11.084C14.8233 11.742 14.2073 12.19 13.3113 12.19H12.5273V13.828H13.3113C14.3893 13.828 15.0053 14.318 15.0053 15.074C15.0053 15.76 14.4173 16.236 13.5913 16.236C12.6673 16.236 12.0513 15.746 11.9673 14.752H9.54533C9.72733 16.936 11.2673 18.182 13.6333 18.182C15.8033 18.182 17.3153 16.992 17.3153 15.256C17.3153 14.024 16.6853 13.324 15.6073 13.002Z" fill="#4A1172"/>
<defs>
<filter id="filter0_ii" x="0" y="0" width="28" height="28" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="-3"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="shape" result="effect1_innerShadow"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="3"/>
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="effect1_innerShadow" result="effect2_innerShadow"/>
</filter>
</defs>
</svg>
/* Styles only for adding space between elements*/

body {
  padding: 2rem;
}

button {
  display: inline-block;
  margin-right: 1em;
  margin-bottom: 1em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.