Windows 8: Creating AppBar Style Buttons with HTML5/CSS

Question

For a Windows 8 Application, I can create AppBar style buttons using 'Segoe UI Symbol' but they have drawn in a rectangle area therefore has a rectangle background. Since I want to set their background to a different color during hover, I need to get rid of this rectangle.

As pointed out in below question, the button and the style are defined like shown.

Please give a direction how this can be accomplish.

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;
}

Update:

Below code does the trick but font is not properly aligned. Probably because it is not made to align properly. Image below shows the layout.

.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

For this point you need to set border-radius:50%; so you your button will change shape to circle then add min-width:0; min-height:0; and text-align:center; here is the full 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;
}

if you don't need border you can set border:none;. Sorry for my bad english

Answer 2

This behavior is driven by the CSS hover selector, and the default CSS there for a button will provide something that aligns with the light or dark theme, e.g.,

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);
}

You could override this very specifically with something like:

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

but there are likely additional states and objects for which you'd want similar treatment.

Take a look at the ui-light.css and ![ui-dark.css][1] that's included in your References; all the answers are in there :)