CODEWITHSUNDEEP
htmlcss
Patrick Reck
Patrick Reck

Reputation: 11374

Multiple CSS styles on a html button

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/

Upvotes: 1

Views: 2794

Answers (4)

Niroshan Ratnayake
Niroshan Ratnayake

Reputation: 3801

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>

Upvotes: 0

alex
alex

Reputation: 490263

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.

Upvotes: 5

Curtis
Curtis

Reputation: 103348

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/ ​

Upvotes: 0

Aaron Digulla
Aaron Digulla

Reputation: 328614

Use <button> instead of <input> since it has child elements which you can style.

Upvotes: 0

Related Questions