title: How do I centralize the text inside a button
body: <p>I'm building my new website on SquareSpace, and wanted something a bit more fancy for my landing page.</p>
  <p>I got this button here (&quot;Button 49,&quot; from <a href="https://getcssscan.com/css-buttons-examples" rel="nofollow noreferrer">https://getcssscan.com/css-buttons-examples</a>).</p>
  <p>My problem now is getting the text centered and being able to adjust the size.</p>
  <p>I tried this <code>text-align</code> but nothing changed, also tried to mess with the <code>line-height</code> but thinks just got funky; and for the size of the button, I can mess with the inputs there but if I do that with the text not centred it gets weird.</p>
  <p>I'm using a custom font, but you can use Arial to visualize.</p>
  <p>Any help is welcome, I don't know code language or how to explain my problem, but thanks for reading.</p>
  <p>As you can see on the image, there is a something wrong on the red circle and the text seems a bit down <a href="https://i.stack.imgur.com/EVWqv.png" rel="nofollow noreferrer">IMAGE OF BUTTON</a></p>
  <p>Here's my current code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>button,
  button::after {
    width: 380px;
    height: 86px;
    font-size: 36px;
    font-family: 'Industry Inc Base';
    background: linear-gradient(45deg, transparent 5%, #fff 5%);
    border: 0;
    color: #000;
    letter-spacing: 3px;
    text-align: center;
    line-height: 80px;
    box-shadow: 8px 0px 0px #282828;
    outline: transparent;
    position: relative;
  }
  
  button::after {
    --slice-0: inset(50% 50% 50% 50%);
    --slice-1: inset(80% -6px 0 0);
    --slice-2: inset(50% -6px 30% 0);
    --slice-3: inset(10% -6px 85% 0);
    --slice-4: inset(40% -6px 43% 0);
    --slice-5: inset(80% -6px 5% 0);
    content: 'ENTER';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 3%, #FF5E1A 3%, #7b00ff 5%, #FF5E1A 5%);
    text-shadow: -3px -3px 0px #7b00ff, 3px 3px 0px #FF5E1A;
    clip-path: var(--slice-0);
  }
  
  button:hover::after {
    animation: 1s glitch;
    animation-timing-function: steps(2, end);
  }
  
  @keyframes glitch {
    0% {
      clip-path: var(--slice-1);
      transform: translate(-20px, -10px);
    }
    10% {
      clip-path: var(--slice-3);
      transform: translate(10px, 10px);
    }
    20% {
      clip-path: var(--slice-1);
      transform: translate(-10px, 10px);
    }
    30% {
      clip-path: var(--slice-3);
      transform: translate(0px, 5px);
    }
    40% {
      clip-path: var(--slice-2);
      transform: translate(-5px, 0px);
    }
    50% {
      clip-path: var(--slice-3);
      transform: translate(5px, 0px);
    }
    60% {
      clip-path: var(--slice-4);
      transform: translate(5px, 10px);
    }
    70% {
      clip-path: var(--slice-2);
      transform: translate(-10px, 10px);
    }
    80% {
      clip-path: var(--slice-5);
      transform: translate(20px, -10px);
    }
    90% {
      clip-path: var(--slice-1);
      transform: translate(-10px, 0px);
    }
    100% {
      clip-path: var(--slice-1);
      transform: translate(0);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;&lt;a href="https://www.aymob.net/portfolio"&gt;&lt;button class="button"&gt;Enter&lt;/button&gt;&lt;/a&gt;&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>