0

I have created a small (10px by 16px) .png icon with transparent background and want this to be on the left side of all my asp:Button elements. The button text shall then appear to the right of this icon. The problem is that I'm using a background gradient and don't know if what I want is possible (for me) at all. Maybe you can help me out. Here is an example that I tried to copy, but it didn't work; the background was at first repeated and I didn't see transparency at all; setting background-repeat: no-repeat fixed the repeating but not the transparency (there was neither text nor gradient background to be seen). Here's the code I tried (it's for IE10+ only):

<style type="text/css">
  .myButton {
    vertical-align: central;
    font-family: Consolas;
    font-size: 14px;
    font-weight: 500;
    border-top-right-radius: 5px;
    background: -ms-linear-gradient(top, #ff0000 0%,#00ff00 100%);
    background-image: url("MyIcon.png");
    background-repeat: no-repeat;
    color: white;
    border: none;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 0px;
    padding-left: 0px;
  }

    .myButton:hover {
      background: -ms-linear-gradient(top, #374a9a 50%,#061671 100%);
    }
</style>

As an example of how it's supposed to look, check this. There are some dark blue buttons that have an icon on the left like I need it. Do I maybe have to use an ImageButton instead of a simple Button (which I wouldn't like), or is there an easier solution?

Community
  • 1
  • 1
InvisiblePanda
  • 1,589
  • 2
  • 16
  • 39
  • By `vertical-align: central;`...I assume you mean `vertical-align: middle;` ? – Paulie_D Jun 25 '14 at 09:52
  • JSfiddle please but I think you require multiple background 'images' which is possible with CSS. - http://stackoverflow.com/questions/2504071/is-it-possible-to-combine-a-background-image-and-css3-gradients/2547064#2547064 – Paulie_D Jun 25 '14 at 09:56

0 Answers0