Как CSS работает правильно в Internet Explorer

Question

Я использую ниже CSS, чтобы сделать кнопку более привлекательной.

Он отлично работает в Google Chrome, но в Internet Explorer он просто показывает цветную коробку.

Как сделать этот CSS полезным в Internet Explorer.

button { 
 
    background: #eb0505; 
 
    background-image: -webkit-linear-gradient(top, #eb0505, #b82b2b); 
 
    background-image: -moz-linear-gradient(top, #eb0505, #b82b2b); 
 
    background-image: -ms-linear-gradient(top, #eb0505, #b82b2b); 
 
    background-image: -o-linear-gradient(top, #eb0505, #b82b2b); 
 
    background-image: linear-gradient(to bottom, #eb0505, #b82b2b); 
 
    -webkit-border-radius: 28; 
 
    -moz-border-radius: 28; 
 
    border-radius: 28px; 
 
    font-family: Georgia; 
 
    color: #ffffff; 
 
    font-size: 20px; 
 
    padding: 10px 20px 10px 20px; 
 
    text-decoration: none; 
 
}

<button>Button</button>

Пожалуйста, помогите.

Answer 1

Но ваш код работает отлично в IE11, для IE 9 вы можете использовать это:

background: #eb0505; 
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eb0505', EndColorStr='#b82b2b'); 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#eb0505', EndColorStr='#b82b2b')"; 
    background-image: -webkit-linear-gradient(top, #eb0505, #b82b2b); 
    background-image: -moz-linear-gradient(top, #eb0505, #b82b2b); 
    background-image: -ms-linear-gradient(top, #eb0505, #b82b2b); 
    background-image: -o-linear-gradient(top, #eb0505, #b82b2b); 
    background-image: linear-gradient(to bottom, #eb0505, #b82b2b); 
    -webkit-border-radius: 28; 
    -moz-border-radius: 28; 
    border-radius: 28px; 
    font-family: Georgia; 
    color: #ffffff; 
    font-size: 20px; 
    padding: 10px 20px 10px 20px; 
    text-decoration: none; 

Answer 2

button { 
      background: #eb0505; 
      border-radius: 28px; 
      font-family: Georgia; 
      color: #ffffff; 
      font-size: 20px; 
      padding: 10px 20px 10px 20px; 
      text-decoration: none; 
     } 


<button>Button</button>