Windows 8: Creating AppBar Style Buttons with HTML5/CSS - html

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"></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 :)