我需要帮助改变一个按钮,看起来像是一个箭头从它出来,以表明它是活动的按钮.按钮被包装在卡片组件中.

下面是一个代码示例:

        <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>

我正在努力改变按钮的外观.我的代码是使用TypeScrip内置的.我想主要使用css来实现这一点.

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

enter image description here

有人能帮帮忙吗?

enter image description here

推荐答案

所以你可以把::before作为元素.将其设置为display:block,然后将其添加到backround:_mainBlue_transform:rotate(45deg).别忘了打content:''.那就调整位置就行了.

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

Css相关问答推荐

NextJs - Tailwind css类样式未应用于响应屏幕

如何在Ionic上更改输入的浮点数名称 colored颜色 ?

CSS媒体查询不显示所需的输出

在 Next.js 中使用 .modules.scss 时未应用样式

为什么我的 React slick 轮播响应能力不起作用?

为什么 width: 100% 在 Flex 父级中缩小这个 div ?

Tailwind CSS: Select 单选按钮时不应用同行判断的边框

在 WooCommerce 变体 Select 中转换属性文本以大写

BootStrap:右对齐嵌套手风琴

使用 Webpack5 在 CSS 文件中内联字体和图像?

CSS3 - RotateY() 居中

紫色表示访问过的超链接

如何更改下拉列表的宽度?

控制表格单元格之间的间距

重置子元素的不透明度 - Maple Browser (Samsung TV App)

媒体查询以错误的宽度触发

在 Vuejs 中拥有全局 CSS 的最佳方式

通过javascript删除或禁用浏览器的焦点边框

以原始大小的 50% 显示图像

CSS flex,如何在第一行显示一个项目,在下一行显示两个项目