#showdev按钮
演示就在这里。源代码在这里。
使用
请不要使用 按钮。他们有不同的意义和行为。将响应链接到Enter键(将触发onClick动作),
对太空的回应。如果用户关注
,它被设置为按钮并使用空间页面将滚动而不是动作。
用于导航,用户可以按Ctrl / Cmd单击它,在新选项卡中打开。
在Firefox中无法中心化精力。我想说的是什么
和
在行为和语义上有很大的不同。
你应该可以使用 无处不在,但如果你想要别的东西,你可以使用
如果你想要一些老派的东西。
<按键> <跨度 角色=“IMG” 咏叹调-标签=“独角兽”> ? 跨度> {“”} 按键 </按钮>
重置样式
带有预定义的样式,但如果我们想要自定义它,我们可以从重置样式开始
/ *重置按钮样式https://css-tricks.com/overriding-default-button-styles/ * / 按键 { 边界: 没有; 填充: 0; 余量: 0; 光标: 指针; / *在现代浏览器中不需要* / -webkit-外观: 没有; -moz-外观: 没有; }
初始风格
让我们的按钮看起来像一个按钮
<按键 班级名称=“按钮”>
/ *灵感来自https://codepen.io/liamj/pen/vvdRdR * / .button { --color暗: #333; --color光: #FFF; 显示: 块; 位置: 相对的; 字体大小: 2rem; 填充: 1rem 2rem; 边界半径: 0.4rem; 背景: VAR(--color光); 颜色: VAR(--color暗); 边界: 0.2rem 固体 VAR(--color暗); 箱阴影: 0 0.2rem 0 0 VAR(--color暗); }
活跃的状态
该按钮应提供活动状态,因此用户将知道按钮响应单击。
.button:活性 { 最佳: 0.2rem; 箱阴影: 没有; }
禁用状态
该按钮应提供禁用状态,因此用户将知道该按钮不可单击。
<按键 班级名称=“按钮” 残>
.button:禁用 { --color暗: #999; 光标: 不允许; }
几乎在那里,但表情符号不会改变颜色。
.button:禁用 { --color暗: #999; 光标: 不允许; / *见https://www.bram.us/2016/10/06/emoji-silhouettes-and-emoji-outlines-with-css/ * / 颜色: 透明; 文字阴影: 0 0 0 VAR(--color暗); }
聚焦状态
按钮应该提供聚焦状态,因此用户将知道焦点在哪里,否则,用户将需要猜测或选项卡到最接近提供焦点的元素。浏览器提供了开箱即用的焦点状态:
铬:
火狐:
苹果浏览器:
Safari中的按钮不是“可点击的”:facepalm:
自定义焦点状态
让我们删除默认焦点状态:
/ * https://fvsch.com/styling-buttons/ * / .button:焦点 { 大纲: 没有; } .button:: - MOZ对焦,内 { 边界: 没有; }
除非您提供替代方案,否则请勿删除大纲
让我们添加自定义大纲:
.button:焦点 { 大纲: 没有; 箱阴影: 0 0.2rem 0 0 VAR(--color暗) 0 2px的 为5px 3px的 #f0f; }
聚焦状态+活跃
因为我们使用 箱阴影
对彼此而言 :活性
和 :焦点
它们可能会发生冲突,我们需要处理特殊情况:
.button:活跃:焦点 { 最佳: 0.2rem; 箱阴影: 0 0像素 6像素 4PX #f0f; }
仅限键盘用户的焦点状态
无需为鼠标用户显示焦点,它仅对键盘用户有用。所以有一个建议要补充 :焦点可见
说要做到这一点。同时我们可以使用polyfill或自己实现此功能。
进口 “焦点可见”;
.js文件聚焦可见 :重点:不(.focus可见) { 箱阴影: 0 0.2rem 0 0 VAR(--color暗); } .js文件聚焦可见 :活跃:不(.focus可见) { 最佳: 0.2rem; 箱阴影: 没有; }
触摸屏
触摸屏对按钮也有特殊要求
最小尺寸
根据许多消息来源(1,2,3),触摸设备上的按钮尺寸应约为1cm。
按键 { 最小宽度: 1厘米; 最小高度: 1厘米; }
此外,相邻按钮周围应有足够的空间,以防止错误的按钮点击。
触摸屏的活动状态
当用户点击触摸设备上的按钮时,他们用手指盖住按钮,因此他们看不到按钮的活动状态。因此,他们需要一种特殊的活动状态,在它们取下手指后的某个时间可见。例如,Material设计为此使用了瑞波效果。
按键 { 用户选择: 没有; / *我们需要删除内置效果* / -webkit抽头高亮颜色: RGBA(0, 0, 0, 0); }
让我们创建自己的点击效果
/ * https://css-tricks.com/touch-devices-not-judged-size/ * / @媒体 (徘徊: 没有) { / *灵感来自https://codepen.io/numerical/pen/XJKeop * / .button ::后 { 内容: “”; 显示: 块; 高度: 100px的; 位置: 绝对; 转变: translate3d(-150%, -50px, 0) ROTATE3D(0, 0, 1, 45deg); 宽度: 200像素; } .button.active ::后 { 背景图片: 线性梯度( 至 最佳, RGBA(255, 0, 255, 0.1) RGBA(255, 0, 255, 0.9) ); 过渡: 所有 2.2S 立方贝塞尔(0.19, 1, 0.22, 1); 转变: translate3d(120%, -100px, 0) ROTATE3D(0, 0, 1, 90度); } }
还有一些JS在鼠标移动后切换类
常量 按键 = ({ 孩子 }) => { 常量 (活性, setActivated) = 应对。useState(假); 返回 ( <按键 班级名称={“按钮” + (活性 ? “活跃的” : “”)} onmousedown事件={() => setActivated(假)} onMouseUp={() => setActivated(真正)} > {孩子} </按钮> ); };
PS
我使用React制作它,但它也可以用纯HTML和CSS实现。我希望你的主要内容是按钮的UX,而不是代码本身。