Question

I am trying to make a button for a message system to show an orange dot if there’s a new message. However, i can’t quite get it working. Is it possible?

Here’s the button

<input type="button" value="Messages &bull;" />​

And the button on jsFiddle if anyone feels like trying out 🙂

http://jsfiddle.net/ePA47/1/

Answer 1

Use a button element instead.

<button type="button">
   Messages <span style="color: orange;">&bull;</span>
</button>

Of course, don’t add your stylings inline. I just did for this example’s sake.

You could also add a class to the button such as new-messages and then do…

button.new-messages:after {
    content: "•";
    color: orange;
}

Just keep in mind the latter won’t work in older IEs.