最近更新了关于页面,不过增加按钮的时候,对现在2014改色的默认扁平按钮不是很满意,效果上也有可读性差的BUG。
索性我直接用CSS(层叠样式表)手搓了一个Aero风格的按钮样式,参考了StackOverflow的回答。
支持高分屏显示,效果如下:

将以下代码添加到WordPress的自定义CSS,即可替换所有按钮的样式:
目前有一个不足之处是不能完好兼容线式按钮,但Aero主题本来就没这样式。个人也不常用。
.wp-block-button .wp-block-button__link {
color:#2b2b2b;
line-height: 12px;
border-radius: 3px;
background: #ECEFEF;
background: linear-gradient(180deg, rgba(236, 239, 239, 1) 0%, rgba(235, 236, 236, 1) 45%, rgba(219, 221, 222, 1) 45%, rgba(204, 210, 212, 1) 100%);
border: 1px solid #f3f3f3;
box-shadow: 0 0 1px 0.8px #707070c7;
transition: border-color calc(1s * 1);
}
.wp-block-button .wp-block-button__link:active {
outline: 1px dotted currentColor;
outline-offset: -3px;
background: linear-gradient(180deg, #EAF6FD 0%, #D9F0FC 45%, #94cfed 45%, #6cb5dc 100%);
border: 1px solid #ECF7FD;
color: #2b2b2b;
/* padding: 2px 7px 3px 9px; */
border: 1px solid #73A7C4;
border-bottom-style: outset;
box-shadow: 0 0 1px 0.8px #2C628B;
transition: border-color calc(1s * 1);
}
.wp-block-button .wp-block-button__link:hover {
color: #2b2b2b;
box-shadow: 0 0 1px 0.8px #3C7FB1;
border: 1px solid #ECF7FD;
transition: box-shadow calc(1s * 1);
}
.wp-block-button .wp-block-button__link:focus-visible {
outline: 1px dotted currentColor;
outline-offset: -3px;
background: linear-gradient(180deg, #EAF6FD 0%, #D9F0FC 50%, #94cfed 51%, #6cb5dc 100%);
border: 1px solid #ECF7FD;
color: #2b2b2b;
border: 1px solid #73A7C4;
border-bottom-style:;
box-shadow: 0 0 1px 0.8px #2C628B;
}
.wp-block-button .wp-block-button__link:focus {
outline: 1px dotted currentColor;
outline-offset: -3px;
color: #003f3f;
border-color: #72f2ff;
transition: border-color calc(1s * 1);
}
参考:
https://stackoverflow.com/questions/4375255/windows-os-button-style-css
https://win7simu.visnalize.com
代码写得不够规范,还请见谅。
在这其中我也发现了一个新的论坛网站……其效果确实令我感到惊艳,只有这两个字可以形容!(一般我很少用加粗强调某事)
