My button's background-color us not working in IE

Question

I have a button with a background-color that is not working in IE 11.

This one is what it should like look (Firefox)

And in IE:

 .loginButton { width: 100% !important; background-color: rgb(0, 148, 146, 0.8) !important; border: 0px !important; font-size: 2em !important; letter-spacing: 1px !important; border: 0px !important; margin-bottom: 5% !important; filter: none !important; overflow: hidden !important; } .loginButton span { cursor: pointer !important; display: inline-block !important; position: relative !important; transition: 2.5s !important; } .loginButton span:after { font-family: FontAwesome !important; content: "\\f101" !important; position: absolute !important; opacity: 0 !important; top: 0 !important; right: -20px !important; transition: 0.5s !important; } .loginButton:hover { border-color: rgb(31, 153, 214) !important; padding-right: 30px !important; color: #ffffff !important; transition: all 0.9s ease !important; } .loginButton:hover span { padding-right: 30px !important; color: #ffffff !important; letter-spacing: 3px !important; transition: all 0.9s ease !important; } .loginButton:hover span:after { opacity: 1 !important; right: 0px !important; } .loginButton:after { width: 100% !important; background-color: white !important; border: 0px !important; font-size: 2em !important; } 

 <b:commandButton styleClass="loginButton" tooltip-position="right" tooltip="Melde dich beim IUBH-Ticketssystem an"> <span>Anmelden </span> </b:commandButton> 

Answer 1

I can't understand why your background-color working on Firefox. In my demo, i got error invalid value

background-color: rgb(0, 148, 146, 0.8) !important;

should be changed to

background-color: rgba(0, 148, 146, 0.8) !important;

https://jsfiddle.net/5qbbmx4z/6/

And You should NOT use !important as much as possible.