css - 在处于事件状态时更改按钮的外观

Question

我需要帮助来更改一个按钮，使其看起来像一个箭头从中伸出，以表明它是事件按钮。该按钮包裹在卡片组件中。

下面是一个代码示例:

        <div className="float-container">
          <div className="creator-container float-child">
            <div>
              <Card className="bg-mainBlue rounded-xl">
                <CardContent>
                  <Button
                    className=" text-white font-nunito text mx-2 pr-35 "
                    onClick={() => onFieldAdd('textField')}
                  >
                    <TextFieldsIcon />
                    <p>&nbsp;&nbsp;&nbsp;Text Box</p>
                  </Button>
               </div>
              </div>
             </div>

我正在努力改变按钮的外观。我的代码是使用 TypeScript 在 React 中构建的。我想主要使用 css 来实现这一点。

我附上了一张我想要的结果的图片。

有人可以帮忙吗？

Answer 1

所以你可以制作 ::before 元素。将其设置为 display:block，然后将其添加到 backround:_mainBlue_ 和 transform:rotate(45deg)。不要忘记 content:''。然后只是玩这个位置。

例子: https://codepen.io/daniel-bedn-/pen/zYWbeeP