CSS с кнопкой 2 градиента?

Ниже приведено изображение кнопки, которую мы используем на нашем сайте, это .png.CSS с кнопкой 2 градиента?

Мы хотели бы видеть, можем ли мы действительно приблизиться к нему с помощью CSS на стандартной кнопке.

Градиент идет сверху: # E14C5B до середины: # D33742 снизу: # B61C27 с парами радиальных радиальных круговых углов.

Возможно ли это в CSS?

enter image description here

2013-09-12 BahaiResearch.com

да, попробуйте следующее: http://www.colorzilla.com/gradient-editor/ – jackJoe

CSS3 Градиенты - ваш друг. Colorzilla, ссылка @jackJoe связана с тем, что я использую все время. Это отличный инструмент. – Michael

Лично мне не нравятся некоторые новые параметры CSS3, один из которых - градиент. Он просто не показывает это правильно. Я бы сделал div и сделал изображение этой кнопки фоном. – OriShuss

Я принесу я начал ...

HTML

<button>Submit</button>

CSS с некоторым фоном градиенты

@import url(http://fonts.googleapis.com/css?family=Pathway+Gothic+One); 
button { 
    font-family: 'Pathway Gothic One', sans-serif; 
    font-size: 1.5em; 
    text-shadow: 1px 1px rgba(0, 0, 0, 0.5); 
    border: 1px solid transparent; 
    border-radius: 3px; 
    height: 50px; 
    width: 100px; 
    color: white; 
    background-repeat: repeat-x; 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E14C5B), color-stop(0.5, #D33742), to(#B61C27)); 
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.25); 
    cursor: pointer; 
}

DEMO

Скриншот:

Button

Если вы хотите какой-то щелкающим типа обратной связи взгляд на клик, вы можете также добавить:

button:active { 
    -webkit-transform: translate(1px, 1px); 
    box-shadow: none; 
}

DEMO w/ :active

Это только префикс для -webkit браузеров. Вам нужно будет предоставить правильные префиксы поставщиков для того, что вы поддерживаете.

источник

2013-09-12 18:20:46 brbcoding

по этой ссылке вы можете сделать похож на днище изображение PNG

http://www.colorzilla.com/gradient-editor/

источник

2013-09-12 18:26:19

Вот версия кросс-браузер с помощью CSS градиент. Я определил 4 цвета для градиента. Первый градиент от 0 до 50% и второй градиент от 51% до 100%.

Ex.

background: linear-gradient(to bottom, #f64757 0%,#f83b49 50%,#eb2735 51%,#ce0011 100%);

Button using css gradient only

jsfiddle demo here

Пожалуйста, обратите внимание, что красный я взял ярче, чем в примере тура. Просто поиграйте с css, чтобы настроить цвета, соответствующие вашим потребностям.

источник

2013-09-13 00:15:44 morgul

CSS с кнопкой 2 градиента?

ответ

Смежные вопросы