CSS Buttons
撰写时间：2025-11-14
修订时间：2025-12-22
浏览器的默认设置
:root {
color-scheme: light dark;
}
body {
color: light-dark(#555, #ACB7C4);
background-color: light-dark(#ccc, #2B2B2B);
}
默认情况下，按钮有一个圆角（Safari的圆角值较大）；没有鼠标悬停的效果，但按下按钮，会自动加亮。
设置padding：
:root {
color-scheme: light dark;
}
body {
color: light-dark(#555, #ACB7C4);
background-color: light-dark(#ccc, #2B2B2B);
}
button {
padding: 0.7em;
}
在Safari中，当padding始超0.7em时，过大的圆角才会自动消失，从而变成一个扁平的按钮。
设置边框
:root {
color-scheme: dark;
}
body {
color: light-dark(#555, #ACB7C4);
background-color: light-dark(#ccc, #2B2B2B);
}
button {
padding: 0.7em;
border: 1px solid gray;
}
在Safari中，当设置边框后，会有一个副作用：该按钮的背景颜色会自动变亮一些，而Chrome不会。为避免此不一致性，需自行指定一个背景颜色。
:root {
color-scheme: dark;
}
body {
color: light-dark(#555, #ACB7C4);
background-color: light-dark(#ccc, #2B2B2B);
}
button {
padding: 0.7em;
border: 1px solid gray;
background-color: #444;
}
当按钮设置了类型为solid的边框后，按下按钮时，按钮不再自动加亮。我们需显式地为其进行:active伪类的设置。
button的border-width默认值为outset，我们可以依此显式地定制一个外凸型的按钮。
:root {
color-scheme: dark;
}
body {
color: light-dark(#555, #ACB7C4);
background-color: light-dark(#ccc, #2B2B2B);
}
button {
padding: 0.7em;
border: 12px outset buttonborder;
background-color: #444;
}
border-width的值设得较大，是为了更好地看到产生外凸效果的原因。实际应用中可适当缩小此值。例如，当此值为5px，外凸效果就较为明显了。
设置:active
当按下按钮时，我们可以通过设置其边框线条的类型来模拟出3D效果。
:root {
color-scheme: dark;
}
body {
color: light-dark(#555, #ACB7C4);
background-color: light-dark(#ccc, #2B2B2B);
}
button {
padding: 0.7em;
border: 1px solid gray;
background-color: #444;
&:active {
border-style: inset;
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.125);
}
}
边框线的3D效果有了，但还不够真实：按钮的文本也应随之而动。使用transform来达到目的。
:root {
color-scheme: dark;
}
body {
color: light-dark(#555, #ACB7C4);
background-color: light-dark(#ccc, #2B2B2B);
}
button {
padding: 0.7em;
border: 1px solid gray;
background-color: #444;
&:active {
border-style: inset;
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.125);
transform: translate(1px, 1px);
}
}
设置:hover
:root {
color-scheme: dark;
}
body {
color: light-dark(#555, #ACB7C4);
background-color: light-dark(#ccc, #2B2B2B);
}
button {
padding: 0.7em;
border: 1px solid gray;
background-color: #444;
&:hover {
color: yellow;
background-color: #555;
}
&:active {
border-style: inset;
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.125);
transform: translate(1px, 1px);
}
}
需注意的是，若同时设置:active及:hover，则须先指定:hover再指定:active。
当鼠标悬停时，通常作法是稍微提高一点按钮的背景色，以及选用一个高亮颜色作为其文本颜色。
按下按钮时，可通过opacity来同时降低一点按钮背景色及文本颜色，以营造真实的光影效果。
:root {
color-scheme: dark;
}
body {
color: light-dark(#555, #ACB7C4);
background-color: light-dark(#ccc, #2B2B2B);
}
button {
padding: 0.7em;
border: 1px solid gray;
background-color: #444;
&:hover {
color: yellow;
background-color: #555;
}
&:active {
border-style: inset;
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.125);
transform: translate(1px, 1px);
opacity: 0.75;
}
}
按钮的悬停及加亮颜色也可通过使用filter值的brightness函数来完成。
:root {
color-scheme: dark;
}
body {
color: light-dark(#555, #ACB7C4);
background-color: light-dark(#ccc, #2B2B2B);
}
button {
padding: 0.7em;
border: 1px solid gray;
background-color: #444;
&:hover {
color: yellow;
filter: brightness(1.3);
}
&:active {
border-style: inset;
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.125);
transform: translate(1px, 1px);
filter: brightness(0.9);
}
}
完成按钮的基本设置
:root {
color-scheme: dark;
}
body {
color: light-dark(#555, #ACB7C4);
background-color: light-dark(#ccc, #2B2B2B);
}
button {
padding: 0.7em 1em;
border: 1px solid gray;
border-radius: 0.1em;
background-color: #444;
cursor: pointer;
&:hover {
color: yellow;
filter: brightness(1.3);
}
&:active {
border-style: inset;
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.125);
transform: translate(1px, 1px);
filter: brightness(0.9);
}
}
在最后的基本设置中，可微调按钮的内边距，为其设置一个较小值的圆角，并将其鼠标指针设置为pointer。
属性type为button, submit, reset的input控件，以及上传控件中的按钮，其设置方法也与button完全一样。
:root {
color-scheme: dark;
}
body {
color: light-dark(#555, #ACB7C4);
background-color: light-dark(#ccc, #2B2B2B);
}
button, input[type=button], input[type=file]::file-selector-button {
padding: 0.7em 1em;
border: 1px solid gray;
border-radius: 0.1em;
background-color: #444;
cursor: pointer;
&:hover {
color: yellow;
filter: brightness(1.3);
}
&:active {
border-style: inset;
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.125);
transform: translate(1px, 1px);
filter: brightness(0.9);
}
}
设置带有图标的按钮
通过background属性，可以为按钮安置背景图标。
:root {
color-scheme: dark;
}
body {
color: light-dark(#555, #ACB7C4);
background-color: light-dark(#ccc, #2B2B2B);
}
button {
padding: 1em;
border: 1px solid gray;
border-radius: 0.1em;
background-color: #444;
line-height: 1em;
padding-left: 35px;
background-repeat: no-repeat;
background-size: 18px;
background-position: 10% center;
cursor: pointer;
&:hover {
color: yellow;
filter: brightness(1.3);
}
&:active {
border-style: inset;
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.125);
transform: translate(1px, 1px);
filter: brightness(0.9);
}
&#info {
background-image: url(/imgs/info-dark.png);
}
&#note {
background-image: url(/imgs/note.png);
}
&#error {
background-image: url(/imgs/error.png);
}
}
尽管图标有不同的颜色，而filter的brightness函数足以应对这些不同的颜色。
也可使用Unicode字符作为背景图标。主要有2种方式。
第一种是将Unicode字符写进svg中，再将svg转换为data URI的形式供background-image使用；第二种方式是使用::before伪类，将Unicode字符直接写进CSS中。
第二种方式最简单，下面是其实现方法。
:root {
color-scheme: dark;
}
body {
color: light-dark(#555, #ACB7C4);
background-color: light-dark(#ccc, #2B2B2B);
}
button {
padding: 1.5em 1em;
border: 1px solid gray;
border-radius: 0.1em;
background-color: #444;
line-height: 1em;
padding-left: 40px;
position: relative;
&::before {
position: absolute;
top: center;
left: 10px;
font-size: 2em;
}
&#cycle::before {
color: cyan;
content: "\2672";
}
&#snow-man::before {
content: "\26C4";
}
&#moon::before {
color: orange;
content: "\23FE";
}
cursor: pointer;
&:hover {
color: yellow;
filter: brightness(1.3);
}
&:active {
border-style: inset;
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.125);
transform: translate(1px, 1px);
filter: brightness(0.9);
}
}
这种方式的优点是节省带宽、资源丰富、清晰度无损耗、且颜色可定制，但缺点是需花点时间从海量的Unicode字符中找到适合场景的字符。
