Как сделать подобный эффект свечения у кнопки с помощью CSS?

Есть кнопка

По поводу скругления и градиента вопросов нет. Как с помощью CSS получить эффект белого свечения сверху?

Ответ

Примерно так: http://jsfiddle.net/IonDen/ctsn0wu2/
body { margin: 25px; } .button { position: relative; border: 0; padding: 25px 35px; border-radius: 50px; font-size: 20px; text-transform: uppercase; font-weight: bold; background: #ffbb00; /* Old browsers */ background: -moz-linear-gradient(top, #ffbb00 0%, #998700 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffbb00), color-stop(100%,#998700)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffbb00 0%,#998700 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffbb00 0%,#998700 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffbb00 0%,#998700 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffbb00 0%,#998700 100%); } .button:after { position: absolute; display: block; content: ""; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50px; background: -moz-radial-gradient(top, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */ background: -webkit-gradient(radial, top center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(top, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(top, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 12+ */ background: -ms-radial-gradient(top, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */ background: radial-gradient(ellipse at top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */ }
Для создания градиента можно использовать например этот инструмент: http://www.colorzilla.com/gradient-editor/