How do I centralize the text inside a button-CodePudding

I'm building my new website on SquareSpace, and wanted something a bit more fancy for my landing page.

I got this button here ("Button 49," from https://getcssscan.com/css-buttons-examples).

My problem now is getting the text centered and being able to adjust the size.

I tried this text-align but nothing changed, also tried to mess with the line-height 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.

I'm using a custom font, but you can use Arial to visualize.

Any help is welcome, I don't know code language or how to explain my problem, but thanks for reading.

As you can see on the image, there is a something wrong on the red circle and the text seems a bit down IMAGE OF BUTTON

Here's my current 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);
  }
}

<p><a href="https://www.aymob.net/portfolio"><button >Enter</button></a></p>

CodePudding user response：

You correctly specified the size of your button using the width and height attributes. It's better to specify the height of your button with this height attribute than using the line-height attribute, which is mostly used for specifying the space between lines of text.

The text 'Enter' is centered inside your button, so that's fine too. Text is centered by default inside a button, so you can leave out text-align: center; in your CSS.

One way to center your button on the page is with CSS flex layout. This works by wrapping the content in a flex container (see CSS code below). This can be the p element you first had, but as this is not really a paragraph, I would use a div element.

Concerning the 'glitch text' displaying lower than the button text, this is likely due to the font indeed. I changed it to font-family: 'sans-serif'; and it looks fine to me.

Finally, please note that it is illegal to wrap a button inside anchor tags. You have to put your anchor tags (i.e. your 'link') inside the button tags.

div {
  display: flex;
  justify-content: center;
}

button,
button::after {
  width: 380px;
  height: 86px;
  font-size: 36px;
  font-family: 'sans-serif';
  background: linear-gradient(45deg, transparent 5%, #fff 5%);
  border: 0;
  color: #000;
  letter-spacing: 3px;
  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);
  }
}

<div><button ><a href="https://www.aymob.net/portfolio">Enter</a></button></div>