下面是一个示例代码,展示了如何使用CSS实现扁平按钮风格,当按钮处于活动状态时隐藏边框和焦点提示:
在上面的代码中,我们使用了一个class名为"button"的样式,将按钮的样式定义为扁平按钮风格。当按钮处于活动状态时(即被按下),我们使用:active
伪类选择器来隐藏边框和焦点提示。
在:active
伪类选择器中,我们将outline
和border
属性都设置为none
,这样按钮在被按下时就不会显示边框和焦点提示。
此外,我们还使用:hover
伪类选择器来定义按钮在鼠标悬停时的样式,以增加用户交互性。
你可以将上面的代码复制到一个HTML文件中并在浏览器中运行,以查看效果。