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

Как создать кнопку, используя чистый CSS с проданным фоновым цветом и поверх него с овальным градиентом формы в центре. Я не хочу использовать какие-либо внешние изображения. Вот кнопка сэмпла. Example Button
В этом примере фон является сплошным черным, а синяя область состоит из двух линейных градиентов (сверху (# 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;
}

Ответы [ 2 ]

3 голосов
/ 22 октября 2010

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

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

http://gradients.glrzad.com/

0 голосов
/ 23 июля 2011

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

...