JSFiddle - React, Tailwind, and code Playground

by Slava Fomin II

HTML

<button id="button-1"><svg width="16" height="16" viewBox="0 0 16 16"><path d="M0 6.25C0 2.864 1.94 1 4.333 1 5.887 1 8 3.148 8 3.148S10.109 1 11.667 1C14.06 1 16 2.864 16 6.25S10.393 15 8 15 0 9.636 0 6.25z"></path></svg><p>Click me</p></button>

<button id="button-2"><svg width="16" height="16" viewBox="0 0 16 16"><path d="M0 6.25C0 2.864 1.94 1 4.333 1 5.887 1 8 3.148 8 3.148S10.109 1 11.667 1C14.06 1 16 2.864 16 6.25S10.393 15 8 15 0 9.636 0 6.25z"></path></svg><p>Click me</p></button>

SCSS

#button-1 {
  
  width: 200px;
  height: 100px;
  line-height: 100px;
  vertical-align: middle;
  font-family: sans-serif;
  
  & > p {
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  
}

#button-2 {
  width: 200px;
  height: 100px;
  font-family: sans-serif;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  
  & > p {
    margin: 0;
    padding: 0;
  }
  
}

svg {
  display: none;
}