Просто для удовольствия я бросил это вместе, но кто знает, что это будет делать за пределами Chrome. Я никогда раньше не играл с радиальными градиентами, но это было весело - я подумал, что, возможно, мой (Ужасный) CSS сможет пролить свет на ваш проект.
CSS:
#button {
display: table;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 50px auto;
padding: 10px;
background:
-webkit-gradient(radial, 50% -200%, 180, 50% -110%, 35, from(#f81499), to(#fff), color-stop(.7,#f81499));
color: #fff;
text-shadow: 0px -1px 0 rgba(0,0,0,.25);
font-family: "droid sans", sans-serif;
font-size: 13px;
-webkit-box-shadow: 0px 1px 0px rgba(0,0,0,0.25);
}
HTML:
<html>
<head>
<title></title>
<link type="text/css" href="test.css" rel="stylesheet" />
</head>
<body>
<div id="button">Upgrade for more</div>
</body>
</html>