Good-looking buttons (using CSS) on Internet Explorer [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance. Closed 10 years ago.

Let's face it, regular Input form buttons开发者_高级运维 are boring and plain. So I tried searching and I thought.. maybe you guys know a better answer.

Do you guys know where I could find sexy css form buttons that work on Internet Explorer?

Thanks

---

This is an old question but I recommand you Twitter Bootstrap.

It is a HTML/CSS framework which allows you make great buttons (among others) easily.

This buttons are "crossbrowser" which means they are compatible with Internet Explorer.

With only one class - btn - you can stylize a <button>, <input type="button"> or <a>.

This :

<button class="btn"></button>

Gives that:

You also can customize your button quickly with an optional class :

btn-primary, btn-info, btn-success, btn-warning, btn-danger and btn-inverse.

This classes transform your button like that :

Then you can choose a size with the classes btn-large, btn-small and btn-mini.

Finally, you can add an icon (the list is here) in your button.

This:

<button class="btn btn-success">
    <i class="icon-shopping-cart icon-white"></i>
    <span>Checkout</span>
</button>

Gives that:

Have fun with your new buttons. :)

---

jQuery UI CSS has some really nice looking ones (I think):

http://www.filamentgroup.com/examples/buttonFrameworkCSS/

(edited link)

---

I would recommend using the background-image property of CSS to change the way your input buttons are rendered. You may set a fixed pixel width and height and create a background graphic with a program like Photoshop or Gimp. If you need the button label to be dynamic then make the image without the text label. This method is not as flexible as other methods but it does guarantee that your buttons will look the same in IE, FireFox and pretty much every other browser. Here is a example CSS class to apply to your input buttons that uses the 'sliding door' method to let you give your button a hover highlight:

.my-styled-button {
  background-image: url('images/my-button-background.png');
  background-repeat: no-repeat;
  background-position: 0px 0px;
  width: 150px;
  height: 80px;
  text-align: center;
  font-size: 12px;
  border: none;
}
.my-styled-button:hover {
  background-position: 0px -80px;
}

---

Here you go: https://github.com/imathis/fancy-buttons