Multiple CSS styles on a html button

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.

Answer 2

使用<button>而不是<input>因为它具有您可以设置样式的子元素。

Answer 3

To add an orange dot to your button, I would recommend using a background-image . This will give you the ability to design the dot however you wish, and not be constrained by font types.

It's also better for accessibility if the orange dot is added as a background image, as this is not content.

<input type="button" value="Messages" class="newmessage" />​​​​​​

​.newmessage
{
    background-image:url('http://img859.imageshack.us/img859/9611/orangedot.jpg');
        background-repeat:no-repeat;
    background-position:right center;
    padding:5px;
    padding-right:25px;
}

See Demo: http://jsfiddle.net/ePA47/3/​

Answer 4

As per the question heading, the following will help to add multiple styles in a single style tag

<button type="button" style= "margin-top : 20px; border-radius: 15px" 
class="btn btn-primary">View Full Profile
</button>