I attempted to incorporate a gradient background color into my action link button:
<p>@Html.ActionLink("Call Cell Phone", "Call", new { id = Model.Id, number = Model.CellNumber }, new { @class = "btn btn-default", @style = "background-color:-webkit-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%);", onclick = "Call('PrimaryNumber');" })</p>
which resulted in the following output:
<a class="btn btn-default" href="/Person/Call/2?number=113-456-789" onclick="Call('PrimaryNumber');" style="background-color:-webkit-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%);">Call Cell Phone</a>
However, Chrome does not recognize the gradient part:
I utilized corolzilla to create this gradient. I also experimented with other versions recommended for Chrome.
background: #f8ffe8; /* Old browsers */
background: -moz-linear-gradient(top, #f8ffe8 0%, #e3f5ab 33%, #b7df2d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8ffe8), color-stop(33%,#e3f5ab), color-stop(100%,#b7df2d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* IE10+ */
background: linear-gradient(to bottom, #f8ffe8 0%,#e3f5ab 33%,#b7df2d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8ffe8', endColorstr='#b7df2d',GradientType=0 ); /* IE6-9 */
How can I adjust this gradient to ensure Chrome recognizes it?