Styling a button

Question

http://jsfiddle.net/eS7bC/5/

button[type=submit] {
    width: 101px; height: 16px;
    background-color: #f68830;
    -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px;
    border: none; 
    cursor:pointer;
}

button[type=submit]:hover::after {
    content:'';
    background-color: #f68830;
    width:6px; height:6px;
    -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
    vertical-align:middle;
    float: right;
    background-color: #d9e4ea;
    margin: 0; padding: 0;
}

I have a button which changes it's style on hover. It works and looks fine on Chrome but there are problems in other browsers. On Firefox the dot that appears on hover is a bit out of place and the button moves when you hover or click on it. IE has similar issues to Firefox. The question is How do I style it to behave and look identical in all browsers?

Answer 1

This is because of the float: right attribute. Try this

button[type=submit] {
    width: 101px; height: 16px;
    background-color: #f68830;
    webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px;
    border: none; 
    cursor:pointer;
    margin: 0; padding: 0;
    position: relative;
}

button[type=submit]:hover::after {
    content:'';
    background-color: #f68830;
    width:6px; height:6px;
    webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
    position: absolute;
    right: 6px;
    top: 5px;
    background-color: #d9e4ea;
    margin: 0; padding: 0;
}

Answer 2

jsFiddle

You can also make the ::before or ::after absolute to prevent any issues. Also allows you to position it where-ever you want.

    button[type=submit] {
    width: 101px; height: 16px;
    background-color: #f68830;
    webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px;
    border: none; 
    cursor:pointer;
}

:hover::before {
    content:'';
    background-color: #f68830;
    width:6px; height:6px;
    webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
    vertical-align:middle;
    float: right;
    background-color: #d9e4ea;
    margin: 0; padding: 0;
    border: none;
    cursor: pointer;
}
button[type=submit]::before {
    overflow:hidden;
    position:absolute;
    left: 30px;
    top; 5px;
}