WP搭配CSS实现Aero按钮效果

最近更新了关于页面,不过增加按钮的时候,对现在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

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

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

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注