CSS按钮样式(点击后带指向小三角)

最近在写一个app，用到很多这种按键类型，分享一波。

一：成果展示

选中变化

 

二：解析

1.先写三个按钮

 2.再写点击方法

3.根据按钮index更改样式

按钮点击前样式:f-color

按钮点击后样式:f-active-color

该按钮样式核心在于点击后选中的f-active-color样式(对该部分代码自己修改数值测试，很快便能上手)

&::after就是在该按钮选中后再渲染一个content(类似::before)，只需要把该content变成三角形，再调整位置到按钮下方，就可以呈现文章开头图片中的效果。

 

 

三：代码

Tips:

        1.该样式基于::after伪类，所以一定要加上lang=“scss”。

        2.使用其他编译器要修改view。