我需要帮助来更改一个按钮,使其看起来像一个箭头从中伸出,以表明它是事件按钮。该按钮包裹在卡片组件中。
下面是一个代码示例:
<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> Text Box</p>
</Button>
</div>
</div>
</div>
我正在努力改变按钮的外观。我的代码是使用 TypeScript 在 React 中构建的。我想主要使用 css 来实现这一点。
我附上了一张我想要的结果的图片。
有人可以帮忙吗?
最佳答案
所以你可以制作 ::before
元素。将其设置为 display:block
,然后将其添加到 backround:_mainBlue_
和 transform:rotate(45deg)
。不要忘记 content:''
。然后只是玩这个位置。
关于css - 在处于事件状态时更改按钮的外观,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/73453305/