Home/ Questions/Q 8912995
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T04:21:08+00:00

I am creating a button with both border radius and gradient. If you check

  • 0

I am creating a button with both border radius and gradient.

If you check in IE browser on the right side a background color is taking.

I am trying to resolve this issue but I am unable to do it.
All the browsers are working fine, only IE is facing this issue

Here is the demo: Link

HTML:

<span aria-disabled="false" id="__button2-0" class="sapUiSegmentedButton" role="radiogroup" tabIndex="0" data-sap-ui="__button2-0">
    <button aria-haspopup="true" aria-disabled="false" id="__button3-0" class="sapCPDownloadBtn sapCPCartBtn sapUiBtn sapUiBtnNoGradient sapUiBtnNorm sapUiBtnS sapUiBtnStd sapUiMenuButton" role="button" tabIndex="-1" type="button" data-sap-ui="__button3-0">
        <span class="sapUiBtnTxt">Download</span>
        <span class="sapUiMenuButtonIco"></span>
    </button>
</span>​

CSS:

.sapCPCartBtn {
    width: 205px;
    /* fallback */
    padding: 10px;
    text-align: center;
    height: 32px;
    box-shadow: none;
    color: #FFFFFF !important;
    font-weight: bold;
    font-size: 1em !important;
    -moz-border-radius: 10px !important;
    -webkit-border-radius: 10px !important;
    border-radius: 10px !important;
    -khtml-border-radius: 10px !important;
    -goog-ms-border-radius: 10px!important;
    margin-top: 5px;
    text-align: center;
    display: inline-block;
    cursor: pointer !important;
    border: 0px!important;
    background-color: #ff0000;
    background: -o-linear-gradient(top, #333399, #000066);
    background: -moz-linear-gradient(top, #333399, #000066);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #333399),color-stop(1, #000066));
}

.sapCPCartBtn {
    background: none\9;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001E5799', endColorstr='#bb7db9e8', GradientType=1 )\9;
 /* ie */
    box-shadow: none\9 !important;
    background-position: 1px 1px \9;
}​
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this and one more thing when you are using filter and border radius in a same class in IE rounded corners will not work… try the below css…

    .sapCPCartBtn {width: 205px;padding: 10px;text-align: center;height: 32px; box-shadow: none;color: #FFFFFF !important; font-weight: bold;font-size: 1em !important;-moz-border-radius: 10px !important;-webkit-border-radius: 10px !important; border-radius: 10px !important;-khtml-border-radius: 10px !important;-goog-ms-border-radius: 10px !important;margin-top: 5px;text-align: center;display: inline-block;cursor: pointer!important;border: 0px !important;background-color: #ff0000;background: -o-linear-gradient(top, #333399, #000066);background: -moz-linear-gradient(top, #333399, #000066);background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #333399),color-stop(1, #000066));filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#333399′, endColorstr=’#000066′, GradientType=0 ); /* ie */}

    • 0