自上次想要修改Aero风格的CSS按钮样式，一发不可收拾，索性直接把其余部分也都实现了Aero Web 2.0 Gloss化（即为通常描述为Frutiger Aero的美学其中一种表达效果）：

原本在页面上方、又被称为主导航栏的部分中，WordPress 2014主题原本格格不入的扁平菜单也拉皮成Vista/Mobile 6.x风格的镜面玻璃样式。

这次主要修改的地方有：

• 主导航栏：Hover 聚光灯菜单、WMC风格子菜单，子菜单选项悬浮有动效
• 黑侧边栏：次要导航 Web Gloss风格渐变、悬停发光效果
• 黑侧边栏：日历小工具水晶按钮、悬停发光效果
• 特色内容回归，链接按钮发光
• 搜索键增加了悬浮与点击效果，圆角改回直角
• a链接全部实现悬停发光效果，绝对不是偷懒

事实上这已经是好几天前的素材了，毕竟VPS炸了……
幸运的是代码在DevTools的本地替换调试部分有所保留，只需要清理一下重复部分。最终效果略有区别但是我很满意。

搭配近期使用的 View Transitions 插件 也有相当不错的动效。

花絮部分：

来源

将以下代码添加到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

代码写得不够规范，还请见谅。

在这其中我也发现了一个新的论坛网站……其效果确实令我感到惊艳，只有这两个字可以形容！（一般我很少用加粗强调某事）

来源

虽然自己设计可以试着导出176×62尺寸的图样，但无论是制作还是调用都略显麻烦。后在网上寻找到这条Mastodon的Toots，可悉知CSS已经支持整数倍放大像素图片的缩放处理了。

Post by @dragonarchitect@rubber.social

View on Mastodon

对于WordPress来说，可以通过添加自定义的style.css代码的class类，并在WP的图片插入功能中调用class类，以此实现这一效果：

.pixbtn {
image-rendering: pixelated;
}

详情参见：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/image-rendering

来源