Windows 8：使用HTML5 / CSS创建AppBar样式按钮

Question

对于Windows 8应用程序，我可以使用“Segoe UI Symbol”创建AppBar样式按钮，但是它们在矩形区域中绘制，因此具有矩形背景。由于我想在悬停期间将背景设置为不同的颜色，我需要摆脱这个矩形。

正如下面的问题所指出的，按钮和样式的定义如下所示。

请指明如何实现这一目标。

create image from character

HTML：

<button id="myAppBarIcon" class="normal-size-icon">&#xE1D8;</button>

CSS：

.normal-size-icon {
    margin-top: 400px;
    margin-left: 630px;
    position: relative;
    font-size: 24px;
    font-family: 'Segoe UI Symbol';
    color: rgb(255, 255, 255);
    background: none;
    border: none;
}

更新

下面的代码可以解决问题，但字体没有正确对齐。可能是因为它没有正确对齐。下图显示了布局。

.normal-size-icon {
    font-size: 24px;
    font-family: 'Segoe UI Symbol';
    color: rgb(555, 255, 255);
    min-width: 0;
    min-height: 0;
    border-radius: 50%;
    border-style: solid;
    padding: 0;
    text-align: center;
}

Answer 1

在这一点上，您需要设置border-radius:50%;，这样您的按钮会将形状更改为圆形，然后添加min-width:0; min-height:0;和text-align:center;这里是完整的CSS：

.normal-size-icon {
    font-size: 24px;
    font-family: 'Segoe UI Symbol';
    color: rgb(555, 255, 255);
    min-width: 0;
    min-height: 0;
    border-radius: 50%;
    border-style: solid;
    padding: 0;
    text-align: center;
}

如果您不需要边框，可以设置border:none;。抱歉我的英文不好

Answer 2

此行为由CSS hover selector驱动，按钮的默认CSS将提供与浅色或深色主题对齐的内容，例如，

button:hover, input[type=button]:hover, input[type=reset]:hover,
input[type=file]::-ms-browse:hover {
    background-color: rgba(255, 255, 255, 0.13);
    border-color: rgb(255, 255, 255);
}

您可以使用以下内容非常具体地覆盖它：

.normal-size-icon:hover {
    background-color: red;
}

但可能还有其他状态和对象需要进行类似处理。

查看参考文献中包含的ui-light.css和![ui-dark.css][1];所有答案都在那里：）