Как я могу создать кнопку, используя чистый CSS, который включает линейные градиенты и цвет фона

Как я могу создать кнопку, используя чистый CSS с проданным цветом фона, а также градиентом овальной формы в центре. Я не хочу использовать внешние изображения. Вот образец кнопки.Пример кнопки
В этом фон в примере сплошной черный, а синяя область состоит из двух линейных градиентов (сверху (#92B5FD) к середине (#6094FC), а затем от середины (#4484FB) к низу (#44BBFC)).
Я начал использовать следующий фрагмент CSS, но не смог понять, как получить желаемый результат.

.gradButton {width:620px;
height:60px;
border:1px solid black;
padding: 0px;
background: -webkit-gradient(linear, left top, left bottom, from(#92bffd), to(#6094fc), color-stop(0.5, #4484fb), color-stop(0.5, #44bbfc));
background-position:center;
outline:0;
position:absolute;
top:-60px;
right:-1px;
z-index:9999;
display:block;
}


person bhups    schedule 22.10.2010    source источник


Ответы (2)


http://webdesignledger.com/tutorials/12-excellent-css3-button-and-menu-techniques

Должно быть все необходимое, и в этом помогут:

http://gradients.glrzad.com/

person Alex    schedule 22.10.2010

Ссылка @Alex на инструмент градиентов очень полезна. Вы также должны проверить это — Кнопки на чистом CSS, потому что в нем есть пример, очень похожий на тот, который вы хотите, и это также базовый материал CSS без изображений.

person user2647    schedule 23.07.2011