如何在 <button> 标签中设置文本样式

Question

我试图用CSS创建按钮。但是文本位于按钮的右侧，当我想将其替换在左侧时。然后我尝试解决按钮类中顺风样式的问题，但我无法修复它。我尝试用 GPT 修复它，但它没有帮助我。

这是我的 ReactJs 代码

import React from "react";
export default function About() {
  return (
    <div className="bg-gray-50 min-h-screen flex items-center px-16 w-full overflow-hidden">
      <div className="flex items-center justify-between">
        <img className="w-[30%] animate-phone" src="Iphone.png" alt="" />
        <div className="w-full max-w-[700px]">
          <div className="text-[#1e2238]">
            <h1 className="font-Sara mb-10 text-5xl lg:text-7xl">About Us</h1>
            <h3 className="font-Dsc">
              Используйте уникальные возможности дополненной реальности (AR) для
              проекции виртуальных объектов в реальное пространство. Наше
              приложение для мобильных телефонов позволяет вам создавать
              захватывающие AR проекции, превращая ваше устройство в мощный
              инструмент для визуализации и взаимодействия с виртуальными
              элементами. Погрузитесь в удивительный мир AR Projection прямо
              сейчас!
            </h3>
            <div>
              <div>
                <button className="button"><span>There</span></button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

这是我的 CSS 样式

.button {
  position: relative;
  border: none;
  background-color: #1e2238; /* Set your desired button background color */
  color: white; /* Set your desired button text color */
  padding: 10px 20px; /* Adjust padding as needed */
  border-radius: 0.375rem;
  padding-right: 0px;
  z-index: 1; /* Ensure the button text is above pseudo-elements */
}

.button span {
  position: relative; /* Ensure relative positioning */
  left: 0; /* Reset left positioning */
}

.button::before,
.button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: rgb(252, 68, 12); /* Set your desired pseudo-element background color */
  transition: 0.4s ease; /* Transition effect for the pseudo-element */
  border-radius: 0.375rem;
  color: white; /* Set text color to white */
  z-index: -1; /* Ensure the pseudo-elements are below the button text */
}

.button::before {
  transform: skew(90deg);
  transform-origin: top left;
}

.button:hover::before,
.button:hover::after {
  width: 100%; /* Expand the pseudo-element width on hover */
}

Answer 1

删除

padding-right

.button {
  position: relative;
  border: none;
  background-color: #1e2238; /* Set your desired button background color */
  color: white; /* Set your desired button text color */
  padding: 10px 20px; /* Adjust padding as needed */
  border-radius: 0.375rem;
  /* padding-right: 0px; */
  z-index: 1; /* Ensure the button text is above pseudo-elements */
}